/*
Theme Name: Morii
Theme URI: https://www.morii.es
Author: Morii
Description: Hotel sales representation for luxury and independent hotels. Five-page brochure theme, fully responsive.
Version: 1.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: morii
*/

/* ============================================================
   Tokens
   ============================================================ */
:root{
  --bg:#EFF3F5;
  --card:#FAFCFD;
  --pastel:#BFDCE8;
  --pastel-deep:#9CC5D6;
  --ink:#262F33;
  --caption:#586165;
  --accent:#3C6C80;
  --accent-dark:#1D3E49;
  --line:rgba(38,47,51,0.12);
  --pad:64px;
  --band-h:420px;
  --maxw:1280px;
}
@media (max-width:1000px){ :root{ --pad:36px; --band-h:320px; } }
@media (max-width:640px){  :root{ --pad:20px; --band-h:220px; } }

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

html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:'Jost',-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:16px; line-height:1.6;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--accent); }
a:hover{ color:var(--accent-dark); }

.serif{ font-family:'Fraunces',Georgia,serif; font-weight:600; }
.eyebrow{
  font-weight:500; letter-spacing:3px; text-transform:uppercase;
  font-size:12px; color:var(--accent);
}
.wrap{ max-width:var(--maxw); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad); }
.skip-link{ position:absolute; left:-9999px; }
.skip-link:focus{ left:8px; top:8px; background:#fff; padding:10px 16px; z-index:99; }

/* ============================================================
   Navigation
   ============================================================ */
.site-nav{ background:var(--card); border-bottom:1px solid rgba(38,47,51,0.1); }
.site-nav__inner{
  max-width:var(--maxw); margin:0 auto;
  padding:16px var(--pad);
  display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.brand{ display:flex; align-items:center; text-decoration:none; color:var(--ink); flex-shrink:0; }
.brand svg{ width:34px; height:29px; }
.brand__word{ font-family:'Fraunces',Georgia,serif; font-weight:600; font-size:19px; letter-spacing:2.5px; margin-left:-3px; }
.nav-right{ display:flex; align-items:center; gap:28px; }
.nav-menu{ display:flex; align-items:center; gap:28px; margin:0; padding:0; list-style:none; }
.nav-menu a{ font-size:14px; text-decoration:none; color:var(--ink); padding-bottom:4px; }
.nav-menu .current-menu-item > a,
.nav-menu .current_page_item > a{ color:var(--accent); border-bottom:2px solid var(--accent); }
.btn{
  display:inline-block; border-radius:999px; text-decoration:none;
  font-size:13px; letter-spacing:1px; padding:15px 32px; border:1px solid transparent;
  cursor:pointer; font-family:inherit; text-align:center;
}
.btn--dark{ background:var(--ink); color:var(--bg); }
.btn--dark:hover{ background:#000; color:var(--bg); }
.btn--light{ background:var(--bg); color:var(--ink); }
.btn--outline{ background:transparent; color:var(--ink); border-color:rgba(38,47,51,0.3); }
.btn--sm{ padding:11px 22px; font-size:12px; }
.nav-toggle{ display:none; background:none; border:0; padding:10px; cursor:pointer; min-width:44px; min-height:44px; }
.nav-toggle span{ display:block; width:22px; height:2px; background:var(--ink); margin:5px 0; }

@media (max-width:900px){
  .nav-toggle{ display:block; }
  .nav-right{
    display:none; position:absolute; left:0; right:0; top:100%;
    background:var(--card); border-bottom:1px solid rgba(38,47,51,0.1);
    flex-direction:column; align-items:flex-start; gap:18px;
    padding:22px var(--pad); z-index:30;
  }
  .site-nav{ position:relative; }
  .nav-right.is-open{ display:flex; }
  .nav-menu{ flex-direction:column; align-items:flex-start; gap:16px; }
}

/* ============================================================
   Hero + bands
   ============================================================ */
.hero{ padding:72px 0 56px; }
.hero--center{ text-align:center; }
.hero--center .hero__inner{ align-items:center; }
.hero__inner{ display:flex; flex-direction:column; gap:18px; }
.hero h1{
  font-family:'Fraunces',Georgia,serif; font-weight:600; margin:0;
  font-size:clamp(28px,4.4vw,46px); line-height:1.16; max-width:900px;
}
.hero p{ font-size:clamp(15px,1.6vw,16px); color:var(--caption); line-height:1.65; margin:0; max-width:720px; }
.hero__ctas{ display:flex; gap:16px; flex-wrap:wrap; margin-top:8px; }
.hero--center .hero__ctas{ justify-content:center; }

.imgband{ width:100%; height:var(--band-h); overflow:hidden; line-height:0; }
.imgband img{ width:100%; height:var(--band-h); object-fit:cover; }

.band{ background:var(--pastel-deep); padding:44px 0; }
.band--tight{ padding:34px 0; }
.band__lead{ margin:0 auto 26px; max-width:820px; text-align:center; font-size:15px; line-height:1.6; color:var(--ink); }
.panel{ background:var(--card); border-top:1px solid rgba(38,47,51,0.1); border-bottom:1px solid rgba(38,47,51,0.1); padding:48px 0; }

.section{ padding:56px 0; }
.section--tight{ padding:40px 0; }
.section__head{ display:flex; flex-direction:column; gap:8px; margin-bottom:28px; }
.section__head--center{ align-items:center; text-align:center; }
.section__head h2{ font-family:'Fraunces',Georgia,serif; font-weight:600; font-size:clamp(22px,3vw,30px); margin:0; }
.section__head p{ font-size:14.5px; color:var(--caption); line-height:1.65; margin:0; max-width:860px; }

/* Two-column section with a label rail */
.rail{ display:flex; gap:56px; padding:44px 0 10px; }
.rail__label{ width:240px; flex-shrink:0; }
.rail__body{ flex-grow:1; display:flex; flex-direction:column; gap:16px; }
.rail__body h2{ font-family:'Fraunces',Georgia,serif; font-weight:600; font-size:clamp(21px,2.6vw,26px); margin:0; }
.rail__body p{ font-size:15px; color:var(--caption); line-height:1.8; margin:0; }
@media (max-width:900px){
  .rail{ flex-direction:column; gap:14px; }
  .rail__label{ width:auto; }
}

/* ============================================================
   Grids and cards
   ============================================================ */
.grid{ display:grid; gap:24px; }
.grid--2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.grid--3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.grid--4{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; }
.grid--5{ grid-template-columns:repeat(5,minmax(0,1fr)); gap:16px; }
@media (max-width:1000px){
  .grid--3,.grid--4,.grid--5{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:640px){
  .grid--2,.grid--3,.grid--4,.grid--5{ grid-template-columns:1fr; gap:16px; }
}

.card{ background:var(--card); border:1px solid var(--line); border-radius:16px; padding:28px; display:flex; flex-direction:column; gap:10px; }
.card--plain{ border:0; }
.card--pastel{ background:var(--pastel); border:0; }
.card h3{ font-family:'Fraunces',Georgia,serif; font-weight:600; font-size:18px; margin:0; }
.card p{ font-size:13.5px; color:var(--caption); line-height:1.65; margin:0; }

.stat{ background:var(--card); border-radius:16px; padding:22px 24px; display:flex; flex-direction:column; gap:6px; }
.stat__n{ font-family:'Fraunces',Georgia,serif; font-weight:600; font-size:clamp(24px,2.6vw,30px); line-height:1.1; }
.stat p{ font-size:13px; color:var(--caption); line-height:1.5; margin:0; }
.stat--pastel{ background:var(--pastel); }
.stat--pastel p{ color:var(--accent-dark); }

.step{ background:var(--card); border:1px solid var(--line); border-radius:16px; padding:26px; display:flex; gap:20px; }
.step__n{ font-family:'Fraunces',Georgia,serif; font-weight:600; font-size:15px; color:var(--accent); flex-shrink:0; width:28px; }
.step__body{ display:flex; flex-direction:column; gap:8px; }
.step__body h3{ font-family:'Fraunces',Georgia,serif; font-weight:600; font-size:18px; margin:0; }
.step__body p{ font-size:14px; color:var(--caption); line-height:1.7; margin:0; }

.svc{ background:var(--card); border:1px solid var(--line); border-radius:18px; padding:34px; display:flex; gap:40px; margin-bottom:22px; }
.svc__label{ width:300px; flex-shrink:0; display:flex; flex-direction:column; gap:8px; }
.svc__label h3{ font-family:'Fraunces',Georgia,serif; font-weight:600; font-size:22px; margin:0; }
.svc__label span{ font-size:12.5px; color:var(--accent); }
.svc__body{ flex-grow:1; display:flex; flex-direction:column; gap:14px; }
.svc__body p{ font-size:14.5px; color:var(--caption); line-height:1.7; margin:0; }
@media (max-width:900px){
  .svc{ flex-direction:column; gap:18px; padding:26px; }
  .svc__label{ width:auto; }
}

.tags{ display:flex; flex-wrap:wrap; gap:8px; }
.tag{ border-radius:999px; padding:8px 16px; font-size:12px; background:var(--bg); border:1px solid rgba(38,47,51,0.15); }
.tag--fill{ background:var(--pastel); border-color:transparent; }
.chips{ display:flex; flex-wrap:wrap; gap:10px; }
.chip{ background:var(--card); border:1px solid rgba(38,47,51,0.15); border-radius:999px; padding:9px 18px; font-size:12.5px; }
.chip--plain{ border-color:transparent; }

.note{ font-size:12.5px; color:var(--caption); line-height:1.6; margin:10px 0 0; }
.lede{ font-size:15px; color:var(--caption); line-height:1.8; margin:0; }
.pull{ font-family:'Fraunces',Georgia,serif; font-weight:600; font-size:clamp(19px,2.3vw,24px); line-height:1.4; margin:0; max-width:820px; }

/* Media pairs */
.media2{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.media2 figure{ margin:0; border-radius:18px; overflow:hidden; line-height:0; }
.media2 img{ width:100%; height:320px; object-fit:cover; }
@media (max-width:700px){
  .media2{ grid-template-columns:1fr; }
  .media2 img{ height:220px; }
}

/* Founder */
.founder{ background:var(--card); border:1px solid var(--line); border-radius:20px; padding:38px; display:flex; gap:40px; align-items:flex-start; }
.founder__photo{ width:220px; flex-shrink:0; border-radius:16px; overflow:hidden; line-height:0; background:var(--pastel); }
.founder__photo img{ width:100%; height:275px; object-fit:cover; }
.founder__body{ flex-grow:1; display:flex; flex-direction:column; gap:14px; }
.founder__body h2{ font-family:'Fraunces',Georgia,serif; font-weight:600; font-size:25px; margin:0; }
.founder__body p{ font-size:14.5px; color:var(--caption); line-height:1.75; margin:0; }
@media (max-width:760px){
  .founder{ flex-direction:column; padding:26px; gap:24px; }
  .founder__photo{ width:180px; }
}

/* CTA band */
.cta{ background:var(--ink); color:var(--bg); padding:44px 0; }
.cta__inner{ display:flex; align-items:center; justify-content:space-between; gap:32px; }
.cta__text{ max-width:700px; display:flex; flex-direction:column; gap:8px; }
.cta__text h2{ font-family:'Fraunces',Georgia,serif; font-weight:600; font-size:clamp(20px,2.4vw,24px); line-height:1.35; margin:0; }
.cta__text p{ font-size:13.5px; color:var(--pastel); line-height:1.6; margin:0; }
@media (max-width:820px){ .cta__inner{ flex-direction:column; align-items:flex-start; } }

/* ============================================================
   Forms
   ============================================================ */
.formcard{ background:var(--card); border:1px solid var(--line); border-radius:20px; padding:clamp(22px,3vw,36px); display:flex; flex-direction:column; gap:18px; }
.formcard h2{ font-family:'Fraunces',Georgia,serif; font-weight:600; font-size:21px; margin:0; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media (max-width:640px){ .field-row{ grid-template-columns:1fr; } }
.formcard label,.formcard .wpforms-field-label{ font-size:12px !important; font-weight:500 !important; color:var(--caption) !important; display:block; margin-bottom:6px; }
.formcard input[type=text],.formcard input[type=email],.formcard input[type=tel],.formcard textarea,
.formcard .wpforms-field-medium,.formcard .wpforms-field-large{
  width:100% !important; max-width:100% !important; background:#fff;
  border:1px solid rgba(38,47,51,0.18); border-radius:10px;
  font-family:inherit; font-size:14px; padding:12px 14px; color:var(--ink);
}
.formcard input[type=text],.formcard input[type=email],.formcard input[type=tel]{ height:46px; padding:0 14px; }
.formcard textarea{ min-height:120px; resize:vertical; }
.formcard button[type=submit],.formcard .wpforms-submit{
  align-self:flex-start; background:var(--ink) !important; color:var(--bg) !important;
  border:0 !important; border-radius:999px !important; padding:15px 34px !important;
  font-family:inherit !important; font-size:13px !important; letter-spacing:1px; cursor:pointer;
}
.contact-grid{ display:grid; grid-template-columns:420px 1fr; gap:40px; align-items:start; }
@media (max-width:980px){ .contact-grid{ grid-template-columns:1fr; } }
.bookcard{ background:var(--pastel-deep); border-radius:20px; padding:32px; display:flex; flex-direction:column; gap:14px; }
.bookcard h2{ font-family:'Fraunces',Georgia,serif; font-weight:600; font-size:21px; margin:0; }
.bookcard p{ font-size:13.5px; color:var(--accent-dark); line-height:1.7; margin:0; }
.calendar-slot{ background:var(--card); border-radius:14px; padding:18px; min-height:80px; }
.calendar-slot iframe{ width:100%; border:0; min-height:620px; }
.calendar-slot__empty{ font-size:12px; color:var(--caption); text-align:center; line-height:1.5; }
.contactcard{ background:var(--card); border:1px solid var(--line); border-radius:20px; padding:28px; display:flex; flex-direction:column; gap:16px; margin-top:20px; }
.contactcard h2{ font-family:'Fraunces',Georgia,serif; font-weight:600; font-size:18px; margin:0; }
.contactrow{ display:flex; align-items:center; gap:14px; }
.contactrow__dot{ width:34px; height:34px; border-radius:50%; background:var(--pastel); flex-shrink:0; }
.contactrow strong{ font-family:'Fraunces',Georgia,serif; font-weight:600; font-size:15px; display:block; }
.contactrow span{ font-size:12.5px; color:var(--caption); }
.applist{ display:flex; flex-wrap:wrap; gap:6px; margin-top:5px; }
.applist span{ background:var(--bg); border:1px solid rgba(38,47,51,0.15); border-radius:999px; padding:4px 11px; font-size:11px; color:var(--ink); }
.placeholder{ color:var(--accent); }

/* ============================================================
   Footer
   ============================================================ */
.site-footer{ background:var(--ink); color:var(--bg); padding:48px 0; }
.site-footer__inner{ display:flex; gap:56px; }
.site-footer__brand{ flex-grow:1; max-width:540px; display:flex; flex-direction:column; gap:12px; }
.site-footer__brand .brand{ color:var(--bg); }
.site-footer__brand .brand svg{ width:42px; height:36px; }
.site-footer__brand .brand__word{ font-size:21px; margin-left:-4px; }
.site-footer .eyebrow{ color:var(--pastel-deep); font-size:11px; }
.site-footer__story{ font-family:'Fraunces',Georgia,serif; font-weight:600; font-size:19px; line-height:1.4; }
.site-footer p{ font-size:13px; color:var(--pastel); line-height:1.75; margin:0; }
.site-footer__col{ width:190px; display:flex; flex-direction:column; gap:10px; }
.site-footer__col a,.site-footer__col span{ font-size:13.5px; color:var(--bg); text-decoration:none; }
.site-footer__col a:hover{ text-decoration:underline; }
.site-footer__col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.site-footer__muted{ font-size:12.5px !important; color:var(--pastel-deep) !important; }
.site-footer .btn{ margin-top:6px; }
.site-footer__col a.btn--light,
.site-footer a.btn--light{ color:var(--ink); text-decoration:none; }
.site-footer__col a.btn--light:hover{ text-decoration:none; }
.legal{ border-top:1px solid rgba(239,243,245,0.15); margin-top:36px; padding-top:20px; font-size:12px; color:var(--pastel-deep); display:flex; gap:20px; flex-wrap:wrap; }
.legal a{ color:var(--pastel-deep); }
@media (max-width:900px){
  .site-footer__inner{ flex-direction:column; gap:30px; }
  .site-footer__col{ width:auto; }
}

/* ============================================================
   App chips, WhatsApp mark, contact-form notices
   ============================================================ */
.applist span, .applist .app{ display:inline-flex; align-items:center; gap:6px; background:var(--bg);
  border:1px solid rgba(38,47,51,0.15); border-radius:999px; padding:4px 11px; font-size:11px;
  color:var(--ink); text-decoration:none; line-height:1.7; }
a.app:hover{ border-color:var(--accent); color:var(--accent); }
.appicon{ flex-shrink:0; display:block; }
.app--wa .appicon{ color:#25D366; }
.formnotice{ border-radius:12px; padding:12px 14px; font-size:13px; line-height:1.55; margin:0 0 16px; }
.formnotice--ok{ background:var(--pastel); color:var(--accent-dark); }
.formnotice--bad{ background:#F7E7E4; color:#7A3B30; }
.formnotice a{ color:inherit; }
.mf-hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* ============================================================
   Property types — the "Our focus" photo tiles on the home page
   ============================================================ */
.focus{ margin-top:4px; }
.focus__label{
  font-weight:500; letter-spacing:3px; text-transform:uppercase;
  font-size:12px; color:var(--accent); margin-bottom:18px;
}
.types{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px;
}
.types figure{
  position:relative; margin:0; border-radius:14px; overflow:hidden;
  aspect-ratio:3/2; background:var(--bg);
}
.types img{ width:100%; height:100%; object-fit:cover; display:block; }
.types figcaption{
  position:absolute; left:0; right:0; bottom:0;
  padding:46px 20px 18px; color:#fff;
  background:linear-gradient(to top,rgba(16,22,25,0.93),rgba(16,22,25,0.55) 45%,rgba(16,22,25,0));
  text-shadow:0 1px 3px rgba(0,0,0,0.45);
  font-family:'Fraunces',Georgia,serif; font-weight:600;
  font-size:17px; line-height:1.28;
}
@media (max-width:1000px){ .types{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:640px){
  .types{ grid-template-columns:1fr; gap:12px; }
  .types figure{ aspect-ratio:16/9; }
  .types figcaption{ font-size:16px; padding:40px 18px 16px; }
}