/*
 Theme Name:   GeneratePress Child
 Theme URI:    https://generatepress.com
 Description:  Default GeneratePress child theme
 Author:       Tom Usborne
 Author URI:   https://tomusborne.com
 Template:     generatepress
 Version:      0.1
*/

/* Mr.J Barbershop — GeneratePress + GenerateBlocks
   Pegar en Apariencia > Personalizar > CSS adicional
   Reemplaza las URL de imagen en el HTML, no en este CSS.
*/
:root {
  --mrj-ink: #11100e;
  --mrj-charcoal: #191714;
  --mrj-paper: #f7f2ea;
  --mrj-cream: #fffaf0;
  --mrj-muted: #8c8175;
  --mrj-awning: #9f1f2d;
  --mrj-brick: #a55337;
  --mrj-gold: #d7b46a;
  --mrj-line: rgba(17,16,14,.14);
  --mrj-white-line: rgba(255,250,240,.16);
  --mrj-radius: 28px;
  --mrj-max: 1180px;
}

body.mrj-barbershop-page,
.mrj-page {
  background: var(--mrj-paper);
  color: var(--mrj-ink);
  font-family: Aptos, "Segoe UI", system-ui, sans-serif;
}

.mrj-page * { box-sizing: border-box; }
.mrj-page a { color: inherit; text-decoration: none; }
.mrj-page img { max-width: 100%; display: block; }
.mrj-page { overflow: hidden; background: radial-gradient(circle at 12% 8%, rgba(215,180,106,.18), transparent 28rem), linear-gradient(180deg, #fff8ed 0%, #f1e7d9 44%, #161411 44%, #161411 100%); }
.mrj-shell { width: min(var(--mrj-max), calc(100% - 40px)); margin-inline: auto; }

.mrj-nav { position: sticky; top: 0; z-index: 20; backdrop-filter: blur(16px); background: rgba(247,242,234,.88); border-bottom: 1px solid rgba(17,16,14,.08); }
.admin-bar .mrj-nav { top: 32px; }
.mrj-nav-inner { min-height: 82px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.mrj-brand { display: flex; align-items: center; gap: 14px; min-width: 0; }
.mrj-brand img { width: 62px; height: 62px; object-fit: contain; border-radius: 50%; background: #fff; padding: 4px; box-shadow: 0 8px 22px rgba(17,16,14,.14); }
.mrj-brand span { display: grid; line-height: 1; }
.mrj-brand strong,
.mrj-title-font { font-family: "Arial Narrow", "Franklin Gothic Medium", "Bahnschrift Condensed", sans-serif; text-transform: uppercase; }
.mrj-brand strong { letter-spacing: .08em; font-size: 1.12rem; }
.mrj-brand em { font-style: normal; color: var(--mrj-muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .18em; margin-top: 6px; }
.mrj-nav-links { display: flex; align-items: center; gap: clamp(14px, 2.4vw, 34px); font-size: .86rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.mrj-nav-links a:not(.mrj-btn) { opacity: .72; transition: opacity .2s, transform .2s; }
.mrj-nav-links a:hover { opacity: 1; transform: translateY(-1px); }

.mrj-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 0; border-radius: 999px; min-height: 48px; padding: 0 22px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; font-size: .78rem; cursor: pointer; transition: transform .2s, box-shadow .2s, background .2s; }
.mrj-btn:focus-visible,
.mrj-page a:focus-visible { outline: 3px solid rgba(159,31,45,.38); outline-offset: 4px; }
.mrj-btn:hover { transform: translateY(-2px); }
.mrj-btn-primary { background: var(--mrj-awning); color: var(--mrj-cream); box-shadow: 0 16px 28px rgba(159,31,45,.24); }
.mrj-btn-dark { background: var(--mrj-ink); color: var(--mrj-cream); box-shadow: 0 18px 36px rgba(17,16,14,.2); }
.mrj-btn-light { background: var(--mrj-cream); color: var(--mrj-ink); }

.mrj-hero { padding: clamp(58px, 8vw, 112px) 0 clamp(54px, 7vw, 96px); }
.mrj-hero-grid { display: grid; grid-template-columns: minmax(0,.95fr) minmax(360px,1.05fr); gap: clamp(34px,5vw,76px); align-items: center; }
.mrj-eyebrow { display: inline-flex; align-items: center; gap: 10px; border: 1px solid rgba(17,16,14,.12); border-radius: 999px; padding: 8px 13px; font-size: .76rem; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; color: #713622; background: rgba(255,250,240,.58); }
.mrj-eyebrow::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--mrj-awning); box-shadow: 0 0 0 5px rgba(159,31,45,.12); }
.mrj-page h1,
.mrj-page h2,
.mrj-page h3 { margin: 0; font-family: "Arial Narrow", "Franklin Gothic Medium", "Bahnschrift Condensed", sans-serif; text-transform: uppercase; line-height: .94; letter-spacing: -.025em; }
.mrj-page h1 { margin-top: 22px; font-size: clamp(3.25rem, 7.6vw, 6.9rem); max-width: 780px; }
.mrj-page h1 span { color: var(--mrj-awning); display: block; }
.mrj-lead { margin: 26px 0 0; max-width: 630px; font-size: clamp(1.05rem,1.9vw,1.28rem); line-height: 1.7; color: #51483f; }
.mrj-hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.mrj-hero-note { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-top: 42px; max-width: 650px; }
.mrj-mini-stat { border-left: 2px solid var(--mrj-awning); padding: 8px 0 8px 14px; }
.mrj-mini-stat strong { display: block; font-family: "Arial Narrow", "Franklin Gothic Medium", "Bahnschrift Condensed", sans-serif; font-size: 1.28rem; text-transform: uppercase; }
.mrj-mini-stat span { color: var(--mrj-muted); font-size: .86rem; font-weight: 700; }
.mrj-hero-card { position: relative; min-height: 620px; border-radius: 38px; background: var(--mrj-charcoal); padding: 18px; box-shadow: 0 26px 70px rgba(17,16,14,.18); transform: rotate(1deg); }
.mrj-hero-card::before { content: ""; position: absolute; inset: -16px; border: 1px solid rgba(17,16,14,.13); border-radius: 48px; transform: rotate(-2deg); pointer-events: none; }
.mrj-hero-photo { height: 100%; min-height: 584px; border-radius: 28px; overflow: hidden; position: relative; background: #111; }
.mrj-hero-photo img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.92) contrast(1.05); }
.mrj-hero-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(17,16,14,.08), rgba(17,16,14,.72)); }
.mrj-floating { position: absolute; left: 34px; bottom: 34px; right: 34px; display: flex; align-items: end; justify-content: space-between; gap: 18px; color: var(--mrj-cream); z-index: 2; }
.mrj-floating p { max-width: 280px; margin: 0; font-size: .9rem; line-height: 1.55; color: rgba(255,250,240,.76); }
.mrj-brand-compact img { width: 92px; height: 92px; }
.mrj-pole { width: 50px; height: 128px; flex: 0 0 auto; border-radius: 999px; border: 6px solid #111; background: repeating-linear-gradient(-28deg, #f7f2ea 0 16px, #c92336 16px 30px, #f7f2ea 30px 46px, #2264a8 46px 60px); box-shadow: 0 0 0 1px rgba(255,255,255,.18), inset 0 0 16px rgba(255,255,255,.75); }

.mrj-section { padding: clamp(70px,9vw,128px) 0; }
.mrj-section-head { display: flex; align-items: end; justify-content: space-between; gap: 28px; margin-bottom: 34px; }
.mrj-section-head h2 { font-size: clamp(2.55rem, 6vw, 5.7rem); max-width: 760px; }
.mrj-section-head p { max-width: 420px; margin: 0; color: #665b50; line-height: 1.7; font-weight: 600; }
.mrj-about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.mrj-card { border-radius: var(--mrj-radius); background: rgba(255,250,240,.72); border: 1px solid rgba(17,16,14,.1); padding: clamp(24px,4vw,42px); box-shadow: 0 16px 44px rgba(17,16,14,.08); }
.mrj-card-dark { background: var(--mrj-charcoal); color: var(--mrj-cream); border-color: var(--mrj-white-line); }
.mrj-card h3 { font-size: clamp(1.7rem,3vw,2.6rem); margin-bottom: 18px; }
.mrj-card p { margin: 0; color: inherit; opacity: .76; line-height: 1.72; }
.mrj-list { display: grid; gap: 14px; margin-top: 26px; }
.mrj-list span { display: flex; gap: 12px; align-items: center; font-weight: 800; }
.mrj-list span::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--mrj-gold); flex: 0 0 auto; }

.mrj-gallery { display: grid; grid-template-columns: 1.1fr .9fr; grid-template-rows: 260px 260px; gap: 18px; }
.mrj-gallery figure { margin: 0; border-radius: var(--mrj-radius); overflow: hidden; position: relative; background: #221f1b; box-shadow: 0 18px 52px rgba(17,16,14,.16); }
.mrj-gallery figure:first-child { grid-row: span 2; }
.mrj-gallery img { width: 100%; height: 100%; object-fit: cover; }
.mrj-gallery figcaption { position: absolute; left: 18px; bottom: 18px; right: 18px; color: var(--mrj-cream); font-weight: 900; text-transform: uppercase; letter-spacing: .08em; font-size: .78rem; text-shadow: 0 2px 14px #000; }

.mrj-dark-band { background: var(--mrj-charcoal); color: var(--mrj-cream); position: relative; }
.mrj-dark-band::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(90deg, rgba(255,250,240,.045) 1px, transparent 1px), linear-gradient(rgba(255,250,240,.035) 1px, transparent 1px); background-size: 54px 54px; mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent); pointer-events: none; }
.mrj-dark-band .mrj-shell { position: relative; }
.mrj-dark-band .mrj-section-head p { color: rgba(255,250,240,.66); }
.mrj-services-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.mrj-service { min-height: 248px; border: 1px solid var(--mrj-white-line); border-radius: 26px; padding: 26px; background: linear-gradient(180deg, rgba(255,250,240,.08), rgba(255,250,240,.035)); display: flex; flex-direction: column; }
.mrj-service small { color: var(--mrj-gold); font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.mrj-service h3 { margin-top: 18px; font-size: 2rem; line-height: 1; }
.mrj-service p { color: rgba(255,250,240,.66); line-height: 1.6; margin: 16px 0 24px; }
.mrj-service-meta { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid var(--mrj-white-line); padding-top: 18px; }
.mrj-price { font-family: "Arial Narrow", "Franklin Gothic Medium", "Bahnschrift Condensed", sans-serif; font-size: 1.85rem; color: var(--mrj-cream); }
.mrj-reserve-link { color: rgba(255,250,240,.74); font-weight: 800; }
.mrj-booking-panel { margin-top: 26px; border-radius: 34px; padding: clamp(26px,4vw,44px); background: linear-gradient(135deg, var(--mrj-awning), #5f121c); display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; box-shadow: 0 22px 54px rgba(0,0,0,.28); }
.mrj-booking-panel h3 { font-size: clamp(2rem,4vw,3.6rem); }
.mrj-booking-panel p { margin: 12px 0 0; max-width: 650px; color: rgba(255,250,240,.76); line-height: 1.65; }

.mrj-contact-grid { display: grid; grid-template-columns: .86fr 1.14fr; gap: 22px; align-items: stretch; }
.mrj-contact-card { border-radius: 34px; background: var(--mrj-cream); padding: clamp(26px,4vw,42px); box-shadow: 0 22px 60px rgba(17,16,14,.13); }
.mrj-contact-card h2 { font-size: clamp(2.4rem,5vw,4.8rem); }
.mrj-contact-list { margin: 28px 0 0; display: grid; gap: 16px; }
.mrj-contact-list a,
.mrj-contact-list div { border-top: 1px solid var(--mrj-line); padding-top: 16px; display: grid; gap: 4px; }
.mrj-contact-list strong { font-family: "Arial Narrow", "Franklin Gothic Medium", "Bahnschrift Condensed", sans-serif; text-transform: uppercase; font-size: 1.2rem; }
.mrj-contact-list span { color: #685d52; line-height: 1.45; overflow-wrap: anywhere; }
.mrj-portrait { border-radius: 34px; overflow: hidden; min-height: 520px; position: relative; background: #111; }
.mrj-portrait img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.08); }
.mrj-portrait::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(17,16,14,.76)); }
.mrj-portrait-label { position: absolute; left: 28px; bottom: 28px; right: 28px; color: var(--mrj-cream); z-index: 1; }
.mrj-portrait-label strong { font-family: "Arial Narrow", "Franklin Gothic Medium", "Bahnschrift Condensed", sans-serif; font-size: clamp(2rem,4vw,3.6rem); text-transform: uppercase; display: block; line-height: .95; }
.mrj-portrait-label span { color: rgba(255,250,240,.7); font-weight: 700; }
.mrj-footer { background: #0f0e0c; color: var(--mrj-cream); padding: 34px 0; }
.mrj-footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.mrj-footer p { margin: 0; color: rgba(255,250,240,.62); font-size: .92rem; }
.mrj-mobile-dock { display: none; }

@media (max-width: 940px) {
  .mrj-nav-links a:not(.mrj-keep) { display: none; }
  .mrj-hero-grid, .mrj-about-grid, .mrj-contact-grid { grid-template-columns: 1fr; }
  .mrj-hero-card { min-height: auto; transform: none; }
  .mrj-hero-photo { min-height: 470px; }
  .mrj-section-head { display: grid; }
  .mrj-gallery { grid-template-columns: 1fr; grid-template-rows: 330px 260px 260px; }
  .mrj-gallery figure:first-child { grid-row: auto; }
  .mrj-services-grid { grid-template-columns: repeat(2,1fr); }
  .mrj-booking-panel { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .admin-bar .mrj-nav { top: 0; }
  .mrj-shell { width: min(100% - 28px, var(--mrj-max)); }
  .mrj-page { background: linear-gradient(180deg, #fff8ed 0%, #f1e7d9 39%, #161411 39%, #161411 100%); }
  .mrj-nav-inner { min-height: 68px; }
  .mrj-brand img { width: 52px; height: 52px; }
  .mrj-brand span, .mrj-nav-links { display: none; }
  .mrj-hero { padding-top: 34px; padding-bottom: 50px; }
  .mrj-hero-grid { gap: 28px; }
  .mrj-eyebrow { font-size: .67rem; letter-spacing: .11em; padding: 8px 11px; }
  .mrj-page h1 { font-size: clamp(3.25rem,17vw,4.75rem); margin-top: 18px; }
  .mrj-lead { font-size: 1rem; line-height: 1.62; margin-top: 20px; }
  .mrj-hero-actions .mrj-btn { width: 100%; min-height: 52px; }
  .mrj-hero-note { grid-template-columns: 1fr; margin-top: 28px; gap: 10px; }
  .mrj-mini-stat { background: rgba(255,250,240,.55); border-radius: 18px; border-left-width: 4px; padding: 13px 14px; }
  .mrj-hero-card { border-radius: 28px; padding: 10px; }
  .mrj-hero-card::before { display: none; }
  .mrj-hero-photo { min-height: 405px; border-radius: 22px; }
  .mrj-floating { left: 16px; right: 16px; bottom: 16px; align-items: center; }
  .mrj-floating p { display: none; }
  .mrj-brand-compact img { width: 76px; height: 76px; }
  .mrj-pole { width: 36px; height: 98px; border-width: 5px; }
  .mrj-section { padding: 62px 0; }
  .mrj-section-head { gap: 14px; margin-bottom: 24px; }
  .mrj-section-head h2 { font-size: clamp(2.65rem,14vw,4rem); }
  .mrj-section-head p { font-size: .98rem; line-height: 1.62; }
  .mrj-card { border-radius: 24px; padding: 24px; }
  .mrj-card h3 { font-size: 2rem; }
  .mrj-gallery { grid-template-rows: 230px 220px 220px; gap: 12px; }
  .mrj-gallery figure { border-radius: 22px; }
  .mrj-services-grid { grid-template-columns: 1fr; gap: 12px; }
  .mrj-service { min-height: auto; padding: 22px; border-radius: 22px; }
  .mrj-service h3 { font-size: 1.9rem; }
  .mrj-price { font-size: 1.65rem; }
  .mrj-booking-panel { border-radius: 24px; padding: 24px; }
  .mrj-booking-panel .mrj-btn { width: 100%; }
  .mrj-contact-card, .mrj-portrait { border-radius: 24px; }
  .mrj-portrait { min-height: 390px; }
  .mrj-footer-inner { display: grid; }
  .mrj-footer { padding-bottom: calc(98px + env(safe-area-inset-bottom)); }
  .mrj-mobile-dock { position: fixed; left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 30; display: grid; grid-template-columns: .88fr .88fr 1.2fr; gap: 8px; padding: 8px; border: 1px solid rgba(255,250,240,.24); border-radius: 24px; background: rgba(17,16,14,.92); box-shadow: 0 18px 42px rgba(0,0,0,.34); backdrop-filter: blur(18px); }
  .mrj-mobile-dock a { min-height: 48px; border-radius: 18px; display: inline-flex; align-items: center; justify-content: center; color: rgba(255,250,240,.82); font-size: .72rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
  .mrj-mobile-dock a:not(.mrj-reserve) { background: rgba(255,250,240,.08); }
  .mrj-mobile-dock .mrj-reserve { background: var(--mrj-awning); color: var(--mrj-cream); box-shadow: 0 12px 26px rgba(159,31,45,.28); }
}

@media (max-width: 380px) {
  .mrj-shell { width: min(100% - 22px, var(--mrj-max)); }
  .mrj-page h1 { font-size: 3rem; }
  .mrj-mobile-dock { grid-template-columns: 1fr 1fr; }
  .mrj-mobile-dock .mrj-reserve { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  .mrj-page *, .mrj-page *::before, .mrj-page *::after { scroll-behavior: auto !important; transition: none !important; }
}