/* ==========================================================================
   Mystellar & Co. — Site Stylesheet (v1)
   Based on the validated homepage mockup v2 (Ideas Iniciales/mystellar-homepage-mockup-v2.html)
   ========================================================================== */

:root{
  --black:#0D0D0D;
  --red:#7A1220;
  --red-deep:#4A0B14;
  --amber:#E0872E;
  --amber-light:#F0A857;
  --cream:#F3EAE0;
  --cream-dim:rgba(243,234,224,0.68);
  --hair:rgba(243,234,224,0.14);
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth; color-scheme:dark;}
body{
  background:var(--black);
  color:var(--cream);
  font-family:'Instrument Sans',sans-serif;
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
.display{ font-family:'Instrument Serif',serif; }
.wrap{ max-width:1240px; margin:0 auto; padding:0 40px; }
.eyebrow{
  font-size:11px; letter-spacing:0.22em; text-transform:uppercase;
  color:var(--amber-light); font-weight:600;
}

/* ---- SKIP LINK (a11y) ---- */
.skip-link{
  position:absolute; left:-9999px; top:0; background:var(--amber); color:var(--black);
  padding:10px 16px; z-index:200; font-weight:700; font-size:13px;
}
.skip-link:focus{ left:16px; top:16px; }

/* ---- NAV ---- */
nav{
  position:sticky; top:0; z-index:50;
  background:rgba(13,13,13,0.86);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--hair);
}
.nav-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 40px; max-width:1240px; margin:0 auto;
}
.logo{ display:flex; align-items:center; gap:12px; text-decoration:none; }
.logo-mark{ width:38px; height:38px; flex-shrink:0; border-radius:50%; object-fit:cover; }
.logo-text{ display:flex; flex-direction:column; line-height:1.1; }
.logo-name{ font-family:'Instrument Serif',serif; font-size:19px; letter-spacing:0.03em; font-weight:600; color:var(--cream); }
.logo-tag{ font-size:9px; letter-spacing:0.16em; text-transform:uppercase; color:var(--amber-light); margin-top:3px; }
.nav-links{ display:flex; gap:34px; list-style:none; align-items:center; }
.nav-links a{
  color:var(--cream); text-decoration:none; font-size:13px;
  letter-spacing:0.04em; font-weight:500; opacity:0.82; transition:opacity .2s;
}
.nav-links a:hover, .nav-links a[aria-current="page"]{ opacity:1; color:var(--amber-light); }
.nav-right{ display:flex; align-items:center; gap:20px; }

.lang-toggle-nav{
  display:inline-flex; border:1px solid var(--hair); border-radius:20px; overflow:hidden;
  font-size:11px; flex-shrink:0;
}
.lang-toggle-nav button{
  padding:6px 12px; cursor:pointer; color:var(--cream-dim); font-weight:600; letter-spacing:0.03em;
  background:transparent; border:none; font-family:inherit;
}
.lang-toggle-nav button.active{ background:var(--amber); color:var(--black); }

.nav-cta{
  border:1px solid var(--amber); color:var(--amber-light);
  padding:9px 20px; border-radius:2px; font-size:12px; letter-spacing:0.05em;
  text-decoration:none; font-weight:600; transition:all .2s; white-space:nowrap;
}
.nav-cta:hover{ background:var(--amber); color:var(--black); }

.nav-toggle{
  display:none; background:none; border:1px solid var(--hair); border-radius:2px;
  width:40px; height:36px; cursor:pointer; padding:0; flex-direction:column;
  align-items:center; justify-content:center; gap:5px;
}
.nav-toggle span{ display:block; width:18px; height:1.5px; background:var(--cream); }

/* ---- HERO (generic, page banner) ---- */
.hero{
  position:relative; min-height:60vh; display:flex; align-items:center;
  overflow:hidden;
  background:
    radial-gradient(ellipse 900px 700px at 78% 30%, rgba(122,18,32,0.55), transparent 60%),
    linear-gradient(120deg, var(--black) 30%, var(--red-deep) 130%);
  padding:70px 0;
}
.hero.hero-tall{ min-height:92vh; }
.hero-grid{
  display:grid; grid-template-columns:1.1fr 0.9fr; align-items:center;
  width:100%; gap:20px;
}
.hero-grid.hero-reverse{ grid-template-columns:0.9fr 1.1fr; }
.hero-copy{ padding:30px 0 30px 0; position:relative; z-index:3; }
.hero.hero-tall .hero-copy{ padding:100px 0 100px 40px; }
.hero.hero-tall .hero-reverse .hero-copy{ padding:100px 40px 100px 0; }
.hero-tagline{ font-weight:600; color:var(--cream); font-size:15px; }
.hero-reverse .hero-tagline{ grid-column:2; }
.hero-copy .eyebrow{ margin-bottom:22px; display:flex; align-items:center; gap:10px; }
.hero-copy .eyebrow::before{
  content:''; width:26px; height:1px; background:var(--amber); display:inline-block;
}
h1.hero-title{
  font-family:'Instrument Serif',serif;
  font-size:clamp(36px, 5vw, 64px); font-weight:500; line-height:1.06;
  letter-spacing:-0.01em; max-width:680px;
}
h1.hero-title em{ font-style:italic; color:var(--amber-light); font-weight:400; }
.hero-sub{
  margin-top:26px; font-size:17px; color:var(--cream-dim); max-width:520px; line-height:1.6;
}
.hero-actions{ display:flex; gap:16px; margin-top:40px; align-items:center; flex-wrap:wrap; }
.btn-primary{
  background:var(--amber); color:var(--black); padding:15px 30px;
  text-decoration:none; font-weight:700; font-size:13px; letter-spacing:0.04em;
  border-radius:2px; transition:transform .2s; display:inline-block; border:none; cursor:pointer;
  font-family:inherit;
}
.btn-primary:hover{ transform:translateY(-2px); }
.btn-ghost{
  color:var(--cream); text-decoration:none; font-size:13px; letter-spacing:0.03em;
  border-bottom:1px solid var(--hair); padding-bottom:3px;
}
.hero-photo-wrap{ position:relative; height:46vh; z-index:2; border-radius:2px; overflow:hidden; }
.hero.hero-tall .hero-photo-wrap{ height:92vh; border-radius:0; }
.hero-photo-wrap img{
  width:100%; height:100%; object-fit:cover;
  object-position:center 22%;
}
.hero.hero-tall .hero-photo-wrap img{
  -webkit-mask-image:linear-gradient(to left, black 55%, transparent 100%);
          mask-image:linear-gradient(to left, black 55%, transparent 100%);
}
.hero.hero-tall .hero-reverse .hero-photo-wrap img{
  -webkit-mask-image:linear-gradient(to right, black 70%, transparent 100%);
          mask-image:linear-gradient(to right, black 70%, transparent 100%);
}
.hero-photo-wrap::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(13,13,13,0.55), transparent 40%);
}
.constellation{ position:absolute; top:14%; left:6%; width:150px; height:150px; opacity:0.5; z-index:3; }

/* ---- PROOF BAR ---- */
.proof-bar{
  border-top:1px solid var(--hair); border-bottom:1px solid var(--hair);
  background:rgba(243,234,224,0.03);
}
.proof-inner{
  display:flex; justify-content:space-between; padding:34px 40px; max-width:1240px; margin:0 auto;
  flex-wrap:wrap; gap:24px;
}
.proof-item{ display:flex; flex-direction:column; gap:8px; max-width:260px; }
.proof-num{ font-family:'Instrument Serif',serif; font-size:19px; color:var(--amber-light); font-weight:500; }
.proof-label{ font-size:13.5px; color:var(--cream-dim); letter-spacing:0.01em; line-height:1.55; }

/* ---- SECTION HEADER ---- */
.section{ padding:120px 0; }
.section-tight{ padding:80px 0; }
.section-head{ max-width:640px; margin-bottom:64px; }
.section-head .eyebrow{ margin-bottom:18px; }
.section-head h2{
  font-family:'Instrument Serif',serif; font-size:clamp(30px,3.4vw,44px); font-weight:500; line-height:1.12;
}
.section-head p{ margin-top:18px; color:var(--cream-dim); font-size:16px; max-width:520px; }

/* ---- SERVICES ---- */
.services-bg{ background:linear-gradient(180deg, var(--black), #140507 60%, var(--black)); }
.service-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--hair); border:1px solid var(--hair);
}
.service-card{
  background:var(--black); padding:44px 34px; transition:background .25s;
}
.service-card:hover{ background:#160607; }
.service-num{ font-family:'Instrument Serif',serif; font-size:13px; color:var(--amber); letter-spacing:0.1em; }
.service-card h3{
  font-family:'Instrument Serif',serif; font-size:23px; font-weight:500; margin-top:18px; margin-bottom:14px;
}
.service-card p{ font-size:14px; color:var(--cream-dim); line-height:1.65; }
.service-tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; }
.service-tags span{
  font-size:11px; border:1px solid var(--hair); color:var(--cream-dim);
  padding:5px 10px; border-radius:20px; letter-spacing:0.02em;
}

/* ---- SERVICES PAGE — detail rows ---- */
.pillar{
  display:grid; grid-template-columns:0.9fr 1.1fr; gap:56px; align-items:start;
  padding:70px 0; border-top:1px solid var(--hair);
}
.pillar:first-of-type{ border-top:none; }
.pillar-num{ font-family:'Instrument Serif',serif; font-size:15px; color:var(--amber); letter-spacing:0.1em; margin-bottom:14px; }
.pillar h3{ font-family:'Instrument Serif',serif; font-size:clamp(26px,2.6vw,34px); font-weight:500; margin-bottom:16px; }
.pillar p{ color:var(--cream-dim); font-size:15px; line-height:1.75; margin-bottom:14px; }
.pillar-list{ list-style:none; display:flex; flex-direction:column; gap:12px; }
.pillar-list li{ font-size:14.5px; color:var(--cream-dim); padding-left:22px; position:relative; }
.pillar-list li::before{ content:'—'; position:absolute; left:0; color:var(--amber-light); }

/* ---- REVIEWS ---- */
.reviews{ margin-top:90px; }
.reviews-head{ display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:14px; flex-wrap:wrap; gap:16px;}
.reviews-head h3{ font-family:'Instrument Serif',serif; font-size:24px; font-weight:500; }
.reviews-note{ font-size:12px; color:var(--amber-light); margin-bottom:26px; font-style:italic; }
.review-strip{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.review-card{
  border:1px solid var(--hair); padding:28px; border-radius:2px; background:rgba(243,234,224,0.02);
}
.review-stars{ color:var(--amber-light); letter-spacing:2px; font-size:13px; margin-bottom:14px;}
.review-card p{ font-size:14.5px; color:var(--cream-dim); line-height:1.7; font-style:italic; }
.review-name{ margin-top:18px; font-size:13px; color:var(--cream); font-weight:600; font-style:normal; }
.review-role{ font-size:11.5px; color:var(--cream-dim); font-style:normal; }

/* ---- ABOUT ---- */
.about-section{
  padding:120px 0; background:linear-gradient(180deg, var(--black), var(--red-deep) 140%);
}
.about-grid{
  display:grid; grid-template-columns:0.85fr 1.15fr; gap:64px; align-items:center;
}
.about-photo{ position:relative; }
.about-photo img{
  width:100%; border-radius:2px; display:block;
  filter:saturate(1.05) contrast(1.03);
}
.about-photo::before{
  content:''; position:absolute; top:-16px; left:-16px; right:16px; bottom:16px;
  border:1px solid var(--amber); z-index:-1; border-radius:2px;
}
.about-copy h1, .about-copy h2{
  font-family:'Instrument Serif',serif; font-size:clamp(28px,3vw,38px); font-weight:500; line-height:1.15; margin-bottom:22px;
}
.about-copy p{ color:var(--cream-dim); font-size:15.5px; line-height:1.75; margin-bottom:16px; max-width:480px; }
.about-fit{ margin-top:30px; display:flex; flex-direction:column; gap:10px; }
.fit-row{ display:flex; gap:12px; font-size:14px; }
.fit-yes{ color:var(--amber-light); }
.fit-no{ color:var(--cream-dim); opacity:0.6; }

.industries-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--hair); border:1px solid var(--hair); margin-top:20px; }
.industry-card{ background:var(--black); padding:30px 22px; text-align:center; }
.industry-card span{ font-family:'Instrument Serif',serif; font-size:16px; }

/* ---- TRENDS/BLOG ---- */
.trends-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.trend-card{ border:1px solid var(--hair); border-radius:2px; overflow:hidden; text-decoration:none; display:block; color:inherit; transition:border-color .2s; }
.trend-card:hover{ border-color:var(--amber); }
.trend-thumb{
  height:160px; background:linear-gradient(135deg, var(--red), var(--red-deep));
  display:flex; align-items:center; justify-content:center;
}
.trend-thumb span{ font-family:'Instrument Serif',serif; font-style:italic; color:rgba(243,234,224,0.35); font-size:14px; }
.trend-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.trend-body{ padding:22px; }
.trend-cat{ font-size:11px; color:var(--amber-light); letter-spacing:0.08em; text-transform:uppercase; }
.trend-body h4{ font-family:'Instrument Serif',serif; font-size:17px; font-weight:500; margin-top:10px; line-height:1.35;}
.trend-body p{ font-size:13px; color:var(--cream-dim); margin-top:10px; }
.trend-meta{ font-size:11.5px; color:var(--cream-dim); opacity:0.7; margin-top:14px; }

.trend-card.coming-soon{ opacity:0.55; pointer-events:none; border-style:dashed; }

/* ---- ARTICLE PAGE ---- */
.article-hero{ padding:160px 0 40px; background:linear-gradient(180deg, var(--red-deep), var(--black) 70%); }
.article-hero .eyebrow{ margin-bottom:18px; }
.article-hero h1{ font-family:'Instrument Serif',serif; font-size:clamp(30px,4vw,48px); font-weight:500; line-height:1.15; max-width:780px; }
.article-meta{ margin-top:22px; font-size:13px; color:var(--cream-dim); }
.article-body{ padding:60px 0 120px; max-width:760px; }
.article-body p{ color:var(--cream-dim); font-size:16.5px; line-height:1.85; margin-bottom:22px; }
.article-body h2{ font-family:'Instrument Serif',serif; font-size:26px; font-weight:500; margin:44px 0 18px; }
.article-body ul{ color:var(--cream-dim); font-size:16px; line-height:1.85; padding-left:22px; margin-bottom:22px; }
.article-cta{ margin-top:48px; padding:34px; border:1px solid var(--hair); border-radius:2px; background:rgba(243,234,224,0.02); }
.article-cta p{ margin-bottom:16px; }

/* ---- CONTACT ---- */
.contact-section{
  padding:100px 0 100px; background:linear-gradient(0deg, var(--black), var(--red-deep) 160%);
}
.contact-inner{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:start; }
.contact-inner h1, .contact-inner h2{
  font-family:'Instrument Serif',serif; font-size:clamp(32px,3.6vw,50px); font-weight:500; line-height:1.1;
  max-width:420px;
}
.contact-details{ margin-top:32px; display:flex; flex-direction:column; gap:14px; font-size:14.5px; color:var(--cream-dim); }
.contact-details a{ color:var(--amber-light); text-decoration:none; }
.contact-details a:hover{ text-decoration:underline; }
.contact-alt{ margin-top:36px; padding:24px; border:1px solid var(--hair); border-radius:2px; background:rgba(243,234,224,0.02); }
.contact-alt p{ font-size:14px; color:var(--cream-dim); line-height:1.7; }
.form-card{ display:flex; flex-direction:column; gap:14px; }
.form-card label{ font-size:12px; letter-spacing:0.04em; text-transform:uppercase; color:var(--cream-dim); margin-bottom:-6px; }
.form-card input, .form-card select, .form-card textarea{
  background:rgba(243,234,224,0.05); border:1px solid var(--hair); color:var(--cream);
  padding:14px 16px; border-radius:2px; font-family:'Instrument Sans',sans-serif; font-size:14px; width:100%;
}
.form-card input:focus, .form-card select:focus, .form-card textarea:focus{ outline:1px solid var(--amber); border-color:var(--amber); }

/* Native <select> popups ignore the translucent field background and paint
   their own (light, by default) surface — force a solid dark surface so the
   closed field and the open dropdown list both stay legible. */
.form-card select{
  background-color:#1a1210; color:var(--cream);
  -webkit-appearance:none; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23F0A857' stroke-width='1.6'%3E%3Cpath d='M5 7.5 10 12.5 15 7.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; background-size:16px;
  padding-right:40px;
}
.form-card select option{
  background-color:#1a1210; color:var(--cream);
}
.form-card button{
  background:var(--amber); color:var(--black); border:none; padding:15px; font-weight:700;
  letter-spacing:0.04em; font-size:13px; border-radius:2px; cursor:pointer;
}
.form-card button:hover{ background:var(--amber-light); }
.form-note{ font-size:11.5px; color:var(--cream-dim); margin-top:4px; font-style:italic; }
.form-honeypot{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.form-status{ font-size:13px; padding:12px 14px; border-radius:2px; display:none; }
.form-status.visible{ display:block; }
.form-status.success{ background:rgba(224,135,46,0.15); border:1px solid var(--amber); color:var(--amber-light); }
.form-status.error{ background:rgba(122,18,32,0.25); border:1px solid var(--red); color:var(--cream); }

/* ---- LEGAL PAGES ---- */
.legal-hero{ padding:150px 0 50px; background:linear-gradient(180deg, var(--red-deep), var(--black) 70%); }
.legal-hero h1{ font-family:'Instrument Serif',serif; font-size:clamp(30px,4vw,46px); font-weight:500; }
.legal-hero .updated{ margin-top:14px; font-size:13px; color:var(--cream-dim); }
.legal-body{ padding:60px 0 120px; max-width:800px; }
.legal-body h2{ font-family:'Instrument Serif',serif; font-size:22px; font-weight:500; margin:38px 0 14px; }
.legal-body h2:first-child{ margin-top:0; }
.legal-body p{ color:var(--cream-dim); font-size:15.5px; line-height:1.8; margin-bottom:16px; }
.legal-body ul{ color:var(--cream-dim); font-size:15.5px; line-height:1.8; padding-left:22px; margin-bottom:16px; }
.legal-body a{ color:var(--amber-light); }

/* ---- SITE FOOTER (all pages) ---- */
.site-footer{
  border-top:1px solid var(--hair); padding:56px 0 34px;
  background:linear-gradient(0deg, #000000, var(--black) 60%);
}
.footer-top{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:32px; margin-bottom:40px; }
.footer-brand{ max-width:340px; }
.footer-brand .logo{ margin-bottom:14px; }
.footer-brand p{ font-size:13.5px; color:var(--cream-dim); line-height:1.7; }
.footer-nav{ display:flex; gap:60px; flex-wrap:wrap; }
.footer-col h5{ font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--amber-light); margin-bottom:14px; }
.footer-col ul{ list-style:none; display:flex; flex-direction:column; gap:10px; }
.footer-col a{ color:var(--cream-dim); text-decoration:none; font-size:13.5px; }
.footer-col a:hover{ color:var(--amber-light); }
.footer-legal{ display:flex; gap:22px; flex-wrap:wrap; }
.footer-legal a{ color:var(--cream-dim); text-decoration:none; font-size:12px; }
.footer-legal a:hover{ color:var(--amber-light); }
.footer-bottom{
  display:flex; justify-content:space-between; margin-top:40px; padding-top:26px;
  border-top:1px solid var(--hair); font-size:12px; color:var(--cream-dim); flex-wrap:wrap; gap:12px;
}

/* ---- REVIEW-ONLY BANNER (present only in the /Review build) ---- */
.review-banner{
  background:#1a1a1a; color:var(--cream-dim); text-align:center;
  padding:10px; font-size:12px; letter-spacing:0.06em; text-transform:uppercase;
  border-bottom:1px solid var(--hair); position:relative; z-index:60;
}
.review-banner b{ color:var(--amber-light); }

/* ---- GOOGLE TRANSLATE WIDGET — hide default chrome, keep only our toggle ---- */
.goog-te-banner-frame.skiptranslate{ display:none !important; }
body{ top:0 !important; }
.goog-te-gadget-icon{ display:none !important; }
#google_translate_element{ position:absolute; left:-9999px; top:-9999px; }
.goog-tooltip, .goog-tooltip:hover{ display:none !important; }
.goog-text-highlight{ background:none !important; box-shadow:none !important; }

/* ---- RESPONSIVE ---- */
@media (max-width:900px){
  .nav-links{
    display:none; position:absolute; top:100%; left:0; right:0;
    background:var(--black); border-bottom:1px solid var(--hair);
    flex-direction:column; align-items:flex-start; gap:0; padding:8px 24px 20px;
  }
  .nav-links.open{ display:flex; }
  .nav-links li{ width:100%; border-top:1px solid var(--hair); }
  .nav-links a{ display:block; padding:14px 0; }
  .nav-toggle{ display:flex; }
  .nav-right .lang-toggle-nav{ display:none; }

  .hero-grid{ grid-template-columns:1fr; }
  .hero-photo-wrap{ height:38vh; order:-1; }
  .hero.hero-tall .hero-photo-wrap{ height:50vh; }
  .hero-copy{ padding:36px 0; }
  .hero.hero-tall .hero-copy{ padding:50px 24px; }

  /* Services hero (photo left, text right) — keep side-by-side on mobile
     instead of stacking, photo top-aligned with the text, text sized to
     fit the same height as the photo column. */
  .hero.hero-tall.hero-services{ min-height:auto; align-items:flex-start; padding:14px 0 32px; }
  .hero-reverse{ grid-template-columns:0.85fr 1.15fr; align-items:flex-start; gap:14px; }
  .hero-reverse .hero-photo-wrap{ order:0; height:auto; aspect-ratio:3/4; align-self:flex-start; }
  .hero.hero-tall .hero-reverse .hero-photo-wrap{ height:auto; }
  .hero.hero-tall .hero-reverse .hero-copy{ padding:0; }
  .hero-reverse .hero-title{ font-size:20px; line-height:1.15; max-width:none; }
  .hero-reverse .hero-sub{ font-size:12.5px; line-height:1.5; margin-top:10px; }
  /* "No random ads..." tagline moves below both the photo and the text on mobile only */
  .hero-grid.hero-reverse .hero-tagline{ grid-column:1 / -1 !important; font-size:12px; margin-top:6px; }

  .about-grid, .contact-inner, .pillar{ grid-template-columns:1fr; }
  .service-grid, .review-strip, .trends-grid{ grid-template-columns:1fr; }
  .industries-grid{ grid-template-columns:repeat(2,1fr); }
  .wrap{ padding:0 24px; }
  .proof-inner{ padding:28px 24px; }
  .footer-top{ flex-direction:column; }
  .section{ padding:70px 0; }
}