/*
Theme Name: Atalaia Tattoo
Author: Mónica Tourón
Description: Tema custom para Atalaia Tattoo
Version: 1.0
*/
/* =========================
   VARIABLES DE MARCA
========================= */
:root {
  --green: #2c6050;
  --cream: #f5f1e8;
  --orange: #d96b2b;
  --black: #111111;
  --text: #111111;

  --max-width: 1200px;

  --serif: Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* =========================
   RESET BÁSICO
========================= */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* =========================
   BASE GLOBAL
========================= */
body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.7;
  color: var(--text);
  background-color: var(--cream);
}

a {
  color: var(--orange);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* =========================
   ESTRUCTURA GENERAL
========================= */
main {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 5rem 2rem;
}

section {
  margin-bottom: 6rem;
}

/* =========================
   HEADER / NAV
========================= */
.site-header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background: transparent;
  padding: 2rem;
  z-index: 10;
}

.header-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo a {
  font-family: var(--serif);
  font-size: 1.4rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #ffffff;
  text-decoration: none;
}

.main-nav ul {
  list-style: none;
  display: flex;
  gap: 2rem;
}

.main-nav a {
  font-family: var(--sans);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: #ffffff;
  text-decoration: none;
}

.main-nav a:hover {
  opacity: 0.6;
}
.logo img {
  height: 42px;
  width: auto;
  display: block;
}
@media (max-width: 768px) {
  .logo img {
    height: 38px;
  }
}
/* =========================
   MENU HAMBURGUESA
========================= */

.menu-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 1.8rem;
  color: #ffffff;
  cursor: pointer;
}

@media (max-width: 768px) {

  .menu-toggle {
    display: block;
    z-index: 1001;
  }

  .main-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: var(--green);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 1000;
  }

  .main-nav ul {
    flex-direction: column;
    gap: 2.5rem;
    text-align: center;
  }

  .main-nav a {
    font-size: 1rem;
  }

  .main-nav.active {
    opacity: 1;
    pointer-events: auto;
  }

}
/* =========================
   HERO
========================= */
.hero h1 {
  font-size: 4.5rem;
  margin-bottom: 1rem;
}

.hero p {
  font-size: 1.1rem;
  max-width: 520px;
}

/* =========================
   BLOQUE ESTUDIO
========================= */
.studio h2 {
  font-size: 2.2rem;
  margin-bottom: 1rem;
}

.studio p {
  max-width: 700px;
}

/* =========================
   PORTFOLIO PREVIEW
========================= */
.portfolio-preview h2 {
  font-size: 2.2rem;
  margin-bottom: 1rem;
}

/* =========================
   CTA EDITORIAL
========================= */

.cta-contact {
  padding: 8rem 0;
  background: var(--cream);
}

.cta-contact-inner {
  max-width: 1000px;
  margin: 0 auto;
  padding: 4.5rem 3rem;
  background: var(--green);
  color: var(--cream);
}

.cta-contact h2 {
  font-size: 2.6rem;
  margin-bottom: 1.2rem;
  color: var(--cream);
}

.cta-contact p {
  font-size: 1.05rem;
  margin-bottom: 2rem;
  max-width: 550px;
  opacity: .9;
}

.cta-contact a {
  display: inline-block;
  padding: 1rem 2.5rem;
  background: var(--orange);
  color: #fff;
  text-decoration: none;
  font-size: .85rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  transition: all .3s ease;
}

.cta-contact a:hover {
  background: #c55d22;
}

/* =========================
   SECCIÓN: TRABAJOS (GRID)
========================= */

.section-head p {
  margin-top: 0.75rem;
}

.portfolio-grid {
  margin-top: 2.5rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}

.work-card h3 {
  margin-top: 1rem;
  font-size: 1.4rem;
}

.work-card p {
  margin-top: 0.5rem;
  color: #333;
}

.work-thumb {
  width: 100%;
  aspect-ratio: 4 / 5;
  background: rgba(17, 17, 17, 0.08);
  border: 1px solid rgba(17, 17, 17, 0.12);
}

.section-foot {
  margin-top: 2.5rem;
}

.btn {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--black);
  border: 1px solid var(--black);
  padding: 0.75rem 1.75rem;
}

.btn:hover {
  text-decoration: none;
  color: var(--orange);
  border-color: var(--orange);
}

/* Responsive */
@media (max-width: 1000px) {
  .portfolio-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  main {
    padding: 3.5rem 1.5rem;
  }

  .hero h1 {
    font-size: 3rem;
  }

  .portfolio-grid {
    grid-template-columns: 1fr;
  }
}
/* =========================
   PÁGINA EL ESTUDIO
========================= */

.studio-hero h1 {
  font-size: 3.5rem;
  margin-bottom: 1rem;
}

.studio-about {
  margin-top: 4rem;
}

.studio-about h2 {
  font-size: 2rem;
  margin-bottom: 1rem;
}

.studio-about p {
  margin-bottom: 1.5rem;
}

.studio-team {
  margin-top: 5rem;
}

.team-grid {
  margin-top: 2.5rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
}

.team-member h3 {
  font-size: 1.8rem;
  margin-top: 1rem;
}

.team-member .role {
  font-family: var(--sans);
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--orange);
  margin-bottom: 1rem;
}

.team-photo {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: rgba(17, 17, 17, 0.08);
  border: 1px solid rgba(17, 17, 17, 0.12);
  max-width: 300px;
}
/* =========================
   ARCHIVE PORTFOLIO
========================= */

.portfolio-archive h1 {
  font-size: 3.5rem;
  margin-bottom: 1rem;
}

.portfolio-archive p {
  margin-bottom: 3rem;
}

.work-card img {
  width: 100%;
  height: auto;
  display: block;
}
/* =========================
   PORTFOLIO MINIMAL
========================= */

.portfolio-minimal {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.portfolio-minimal .work-card {
  overflow: hidden;
}

.portfolio-minimal img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4 / 5;
  transition: transform 0.4s ease;
}

.portfolio-minimal .work-card:hover img {
  transform: scale(1.03);
}

/* Responsive */
@media (max-width: 1000px) {
  .portfolio-minimal {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .portfolio-minimal {
    grid-template-columns: 1fr;
  }
}
/* =========================
   SINGLE TRABAJO MINIMAL
========================= */

.single-work.minimal {
  max-width: 1000px;
  margin: 0 auto;
}

.single-work-image img {
  width: 100%;
  height: auto;
  display: block;
  margin-bottom: 3rem;
}

.work-description {
  max-width: 600px;
  margin: 0 auto 4rem auto;
  font-size: 1rem;
  line-height: 1.7;
  text-align: left;
}

.minimal-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 600px;
  margin: 4rem auto 0 auto;
  font-family: var(--sans);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.minimal-nav a {
  color: var(--black);
  text-decoration: none;
  transition: opacity 0.3s ease;
}

.minimal-nav a:hover {
  opacity: 0.5;
}
/* ======================
   FOOTER FINAL FIX
====================== */

.site-footer {
  width: 100%;
  margin-top: 6rem;
}

/* MAPA FULL WIDTH */
.footer-map {
  width: 100%;
}

.footer-map iframe {
  width: 100%;
  height: 350px;
  border: 0;
  display: block;
}

/* BLOQUE VERDE REAL FULL WIDTH */
.footer-inner {
  width: 100%;
  background: #2c6050;
  color: #ffffff;
  padding: 4rem 0 3rem 0;
}

/* CONTENIDO CENTRADO */
.footer-main,
.footer-legal,
.footer-bottom {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

/* BLOQUE PRINCIPAL */
.footer-main {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 3rem;
  margin-bottom: 3rem;
}

/* INFO */
.footer-info h3 {
  font-family: var(--serif);
  font-size: 1.4rem;
  margin-bottom: 1rem;
  color: #fff;
}

.footer-info p {
  margin: 0 0 0.5rem;
  opacity: 0.85;
}

/* BOTÓN */
.footer-whatsapp {
  display: inline-block;
  padding: 1rem 2rem;
  background: #ffffff;
  color: #2c6050;
  text-decoration: none;
  font-family: var(--sans);
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* LEGALES */
.footer-legal {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  font-size: 0.8rem;
  margin-bottom: 2rem;
}

.footer-legal a {
  color: rgba(255,255,255,0.8);
  text-decoration: none;
}

/* COPYRIGHT */
.footer-bottom {
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.7;
}

.footer-bottom a {
  color: rgba(255,255,255,0.9);
  text-decoration: none;
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .footer-main {
    flex-direction: column;
    align-items: flex-start;
  }

  .footer-map iframe {
    height: 250px;
  }
}
.site-footer p {
  max-width: none;
}
.site-footer {
  display: block;
}

.site-footer * {
  max-width: none;
}
/* =========================
   HOME — HERO UPGRADE
========================= */

.hero {
  padding-top: 1rem;
}

.hero h1 {
  font-size: clamp(3rem, 6vw, 5.2rem);
  line-height: 0.95;
  letter-spacing: -0.02em;
}

.hero p {
  margin-top: 1.25rem;
  font-size: 1.05rem;
  opacity: 0.9;
}

/* Botón principal (si existe .btn en hero) */
.hero .btn {
  margin-top: 2rem;
}
/* =========================
   HOME — RITMO SECCIONES
========================= */
section {
  margin-bottom: 7rem;
}

@media (max-width: 600px) {
  section {
    margin-bottom: 5rem;
  }
}
/* =========================
   CTA — MÁS PREMIUM
========================= */

.cta-contact {
  border: 1px solid rgba(245,241,232,0.35);
}

.cta-contact a {
  transition: 0.25s ease;
}

.cta-contact a:hover {
  text-decoration: none;
  background: rgba(245,241,232,0.08);
}
/* =========================
   HERO CON IMAGEN DE FONDO
========================= */

.hero-bg{
  position: relative;
  width: 100%;
  min-height: 88vh;
  display: grid;
  place-items: center;
  overflow: hidden;

  background-color: var(--green);
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* OVERLAY */
.hero-bg__overlay{
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(31,61,50,0.78) 0%,
    rgba(31,61,50,0.62) 45%,
    rgba(31,61,50,0.38) 100%
  );
  z-index: 1;
}

/* CONTENIDO */
.hero-bg__inner{
  position: relative;
  z-index: 2;
  width: min(1100px, 100%);
  padding: 6rem 2rem;
}

.hero-bg__kicker{
  color: rgba(245,241,232,0.9);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.85rem;
  margin-bottom: 1rem;
  max-width: none;
}

.hero-bg__title{
  color: var(--cream);
  font-size: clamp(3rem, 6vw, 6.2rem);
  line-height: 0.92;
  margin-bottom: 2rem;
}

.hero-bg__actions{
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.hero-bg__btn{
  display: inline-block;
  background: var(--orange);
  color: #fff;
  padding: 1rem 1.6rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.8rem;
  text-decoration: none;
  border: 1px solid transparent;
}

.hero-bg__btn:hover{
  text-decoration: none;
  opacity: 0.9;
}

.hero-bg__btn--ghost{
  background: var(--green);
  border-color: var(--green);
  color: #fff;
}

.hero-bg__btn--ghost:hover{
  background: #234b3e;
  border-color: #234b3e;
}

/* MÓVIL */
@media (max-width: 768px){
  .hero-bg{
    min-height: 78vh;
  }

  .hero-bg::before{
    background-position: 72% center;
  }

  .hero-bg__overlay{
    background: rgba(31,61,50,0.52);
  }

  .hero-bg__inner{
    padding: 4.5rem 1.5rem;
  }
}
/* =========================
   HEADER REFINADO
========================= */

/* Logo más grande */
.site-header .logo img {
  height: 80px;   /* ajusta si lo quieres aún más grande */
  width: 80px;
  object-fit: cover;
  border-radius: 50%;
}

/* Quitar posible filtro si lo añadimos antes */
.site-header .logo img {
  filter: none;
}
.site-header .main-nav a {
  position: relative;
  padding: 0.6rem 1rem;
  border-radius: 50px;
  transition: all 0.3s ease;
}

.site-header .main-nav a:hover {
  background: var(--green);
  color: #ffffff;
  transform: translateY(-2px);
}
/* =========================
   HOME — EL ESTUDIO
========================= */
.home-studio {
  margin-bottom: 6rem;
}

.studio-wrap {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 3.5rem;
  align-items: center;
}

.studio-media {
  position: relative;
  border: 1px solid rgba(17, 17, 17, 0.12);
  background: rgba(17, 17, 17, 0.06);
  overflow: hidden;
}

.studio-media img {
  width: 100%;
  height: 520px;
  object-fit: cover;
  display: block;
  transform: scale(1.02);
}

.studio-content .studio-kicker {
  font-family: var(--sans);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--orange);
  margin-bottom: 0.8rem;
}

.home-studio h2 {
  font-size: 2.6rem;
  line-height: 1.1;
  margin-bottom: 1rem;
}

.studio-lead {
  font-size: 1.05rem;
  max-width: 620px;
  margin-bottom: 1.6rem;
}

.studio-points {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem 0;
  display: grid;
  gap: 0.9rem;
}

.studio-points li {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 0.75rem;
  align-items: start;
  max-width: 640px;
}

.studio-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}

/* mini banda inferior */
.studio-strip {
  border-top: 1px solid rgba(17, 17, 17, 0.12);
  padding-top: 1.5rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.strip-title {
  font-family: var(--sans);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(17, 17, 17, 0.7);
  margin-bottom: 0.35rem;
}

.strip-text {
  font-family: var(--sans);
  font-size: 0.95rem;
  margin: 0;
  max-width: none;
}

/* Responsive */
@media (max-width: 950px) {
  .studio-wrap {
    grid-template-columns: 1fr;
  }
  .studio-media img {
    height: 420px;
  }
  .studio-strip {
    grid-template-columns: 1fr;
  }
}
/* =========================
   HOME · TRABAJOS
========================= */

.home-works{
  margin: 0 auto;
}

.works-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:2rem;
  margin-bottom:2.5rem;
}

.kicker{
  font-size:.78rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color: var(--orange);
  margin-bottom:.75rem;
}

.home-works h2{
  font-size: clamp(1.9rem, 3.2vw, 2.6rem);
  line-height: 1.05;
  max-width: 38ch;
}

/* Grid editorial */
.works-grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.5rem;
}

/* Tarjeta */
.work-card{
  grid-column: span 4;            /* 3 columnas en desktop */
  display:block;
  color: inherit;
  text-decoration:none;
}

.work-media{
  position:relative;
  overflow:hidden;
  border: 1px solid rgba(17,17,17,.12);
  background: rgba(17,17,17,.06);
  aspect-ratio: 4 / 5;
}

.work-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transform: scale(1.02);
  transition: transform .45s ease, filter .45s ease;
}

/* Placeholder si no hay imagen */
.work-placeholder{
  width:100%;
  height:100%;
  background:
    linear-gradient(135deg, rgba(17,17,17,.06), rgba(17,17,17,.02));
}

/* Meta */
.work-meta{
  padding-top: 1rem;
}

.work-title{
  font-size: 1.25rem;
  line-height: 1.1;
  margin: 0;
}

.work-excerpt{
  margin-top:.55rem;
  color: rgba(17,17,17,.75);
  max-width: none;
}

/* Hover con carácter */
.work-card:hover .work-media img{
  transform: scale(1.08);
  filter: contrast(1.05) saturate(1.05);
}

.work-card:hover .work-title{
  color: var(--green);
}

/* Botones (si no los tienes ya así) */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding: .9rem 1.35rem;
  font-family: var(--sans);
  font-size: .82rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  border: 1px solid rgba(17,17,17,.35);
  color: var(--black);
  text-decoration:none;
  transition: .25s ease;
}

.btn-solid{
  background: var(--orange);
  border-color: var(--orange);
  color: #fff;
}

.btn-solid:hover{
  opacity:.92;
  text-decoration:none;
}

.btn-outline{

  background: var(--orange);

  border-color: var(--orange);

  color: #fff;

}

.btn-outline:hover{
  background: var(--green);
  border-color: var(--green);
  color:#fff;
  text-decoration:none;
}

.works-foot{
  margin-top: 2.5rem;
}

/* Responsive */
@media (max-width: 1000px){
  .work-card{ grid-column: span 6; } /* 2 columnas */
}

@media (max-width: 640px){
  .works-head{
    align-items:flex-start;
    flex-direction:column;
  }
  .work-card{ grid-column: span 12; } /* 1 columna */
}
/* =========================
   HOME · EQUIPO
========================= */

.home-team .team-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:2rem;
  margin-bottom:2.5rem;
}

.team-lead{
  margin-top:.9rem;
  color: rgba(17,17,17,.75);
  max-width: 60ch;
}

/* Grid */
.team-grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.5rem;
}

/* Card */
.team-card{
  grid-column: span 6;           /* 2 columnas desktop */
  display:grid;
  grid-template-columns: 160px 1fr;
  gap: 1.25rem;
  padding: 1.25rem;
  border: 1px solid rgba(17,17,17,.12);
  background: rgba(255,255,255,.25);
}

.team-photo{
  overflow:hidden;
  border: 1px solid rgba(17,17,17,.12);
  background: rgba(17,17,17,.06);
  aspect-ratio: 1 / 1;
}

.team-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition: transform .45s ease;
}

.team-placeholder{
  width:100%;
  height:100%;
  background: linear-gradient(135deg, rgba(17,17,17,.06), rgba(17,17,17,.02));
}

.team-name{
  font-size: 1.35rem;
  line-height: 1.1;
  margin: 0 0 .6rem 0;
}

.team-bio{
  color: rgba(17,17,17,.78);
  max-width: none;
}

.team-link{
  display:inline-block;
  margin-top: .9rem;
  font-size: .8rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--orange);
  text-decoration: none;
}

.team-card:hover .team-photo img{
  transform: scale(1.05);
}

.team-card:hover .team-name{
  color: var(--green);
}

/* Responsive */
@media (max-width: 900px){
  .team-card{ grid-column: span 12; }
}

@media (max-width: 640px){
  .home-team .team-head{
    align-items:flex-start;
    flex-direction:column;
  }
  .team-card{
    grid-template-columns: 1fr;
  }
  .team-photo{
    max-width: 260px;
  }
}
/* =========================
   CTA BAND (PREMIUM)
========================= */
.cta-band{
  padding: 5rem 0 3.5rem;
  background: var(--cream);
}

.cta-band-inner{
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 2.25rem 2rem;
  border: 1px solid rgba(17,17,17,.12);
  border-left: 6px solid var(--orange);
  background: rgba(255,255,255,.35);
  backdrop-filter: blur(2px);
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 2rem;
  align-items: center;
}

.cta-band-eyebrow{
  font-size: .75rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: .6rem;
}

.cta-band h2{
  font-size: clamp(1.8rem, 2.6vw, 2.4rem);
  line-height: 1.05;
  margin-bottom: .6rem;
}

.cta-band p{
  max-width: 58ch;
  opacity: .85;
}

.cta-band-actions{
  display: flex;
  flex-direction: column;
  gap: .85rem;
  align-items: flex-start;
}

.cta-band-btn{
  display: inline-block;
  padding: 1rem 1.4rem;
  background: var(--orange);
  color: #fff;
  text-decoration: none;
  font-family: var(--sans);
  font-size: .85rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  border: 1px solid var(--orange);
}

.cta-band-btn:hover{
  opacity: .92;
  text-decoration: none;
}

.cta-band-link{
  color: var(--black);
  text-decoration: none;
  font-size: .9rem;
  border-bottom: 1px solid rgba(17,17,17,.25);
  padding-bottom: 2px;
}

.cta-band-link:hover{
  border-bottom-color: rgba(17,17,17,.55);
  text-decoration: none;
}

@media (max-width: 900px){
  .cta-band-inner{
    grid-template-columns: 1fr;
  }
  .cta-band-actions{
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }
}
/* =========================
   HEADER: normal en todas, overlay SOLO en home
========================= */

/* Base (todas las páginas) */
.site-header{
  position: sticky;      /* o "relative" si no quieres sticky */
  top: 0;
  z-index: 999;
  background: var(--green);
  padding: 1.25rem 2rem;
}

/* Asegura colores del menú */
.site-header .main-nav a{
  color: #fff;
}

/* Si quieres hover “verde con texto blanco” como dijiste */
.site-header .main-nav a:hover{
  background: var(--green);
  color: #fff;
  text-decoration: none;
  border-radius: 999px;
  padding: .45rem .8rem;
}

/* SOLO HOME: header overlay encima del hero */
body.home .site-header{
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  background: transparent;
}
.site-header .main-nav a:hover{
  background: #2c6050 !important;
  color: #fff !important;
  opacity: 1 !important;
}

body:not(.home) main{
  padding-top: 5rem; /* ajusta si quieres menos */
}
/* =========================
   PORTFOLIO ARCHIVE PRO
========================= */

.portfolio-archive {
  padding-top: 2rem;
}

.portfolio-archive-head {
  margin-bottom: 3rem;
}

.portfolio-kicker {
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 0.75rem;
}

.portfolio-archive h1 {
  font-size: clamp(2.8rem, 5vw, 4.5rem);
  line-height: 0.95;
  margin-bottom: 1rem;
}

.portfolio-intro {
  max-width: 650px;
  font-size: 1rem;
  opacity: 0.85;
}

/* Mosaico */
.portfolio-masonry {
  column-count: 3;
  column-gap: 1.5rem;
}

.work-card {
  break-inside: avoid;
  margin-bottom: 1.5rem;
  overflow: hidden;
}

.work-card a {
  display: block;
  text-decoration: none;
}

.work-card img,
.work-thumb {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.4s ease, opacity 0.35s ease, filter 0.35s ease;
}

.work-thumb {
  aspect-ratio: 4 / 5;
  background: rgba(17, 17, 17, 0.08);
  border: 1px solid rgba(17, 17, 17, 0.12);
}

.work-card a:hover img {
  transform: scale(1.02);
  opacity: 0.94;
  filter: contrast(1.02);
}

/* Responsive */
@media (max-width: 1100px) {
  .portfolio-masonry {
    column-count: 2;
  }
}

@media (max-width: 700px) {
  .portfolio-masonry {
    column-count: 1;
  }

  .portfolio-archive-head {
    margin-bottom: 2rem;
  }
}
.work-card {
  border-radius: 0;
}

.portfolio-masonry:hover .work-card img {
  opacity: 0.96;
}

.portfolio-masonry .work-card:hover img {
  opacity: 1;
}
/* =========================
   FILTROS PORTFOLIO
========================= */

.portfolio-filters {
  display: flex;
  gap: 0.8rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}

.filter-btn {
  background: transparent;
  border: 1px solid rgba(17,17,17,0.2);
  padding: 0.7rem 1.1rem;
  font-family: var(--sans);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.25s ease;
}

.filter-btn:hover,
.filter-btn.active {
  background: var(--green);
  color: var(--cream);
  border-color: var(--green);
}
/* =========================
   LANDING MARCO
========================= */

.marco-hero{
  position: relative;
  min-height: 88vh;
  display: flex;
  align-items: center;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.marco-hero__overlay{
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(31,61,50,0.82) 0%,
    rgba(31,61,50,0.68) 45%,
    rgba(31,61,50,0.38) 100%
  );
}

.marco-hero__inner{
  position: relative;
  z-index: 2;
  max-width: 1200px;
  padding: 7rem 2rem 5rem;
  color: var(--cream);
}

.marco-hero__kicker{
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.8rem;
  margin-bottom: 1rem;
  color: rgba(245,241,232,0.85);
}

.marco-hero__title{
  font-size: clamp(2.8rem, 5vw, 5.4rem);
  line-height: 0.95;
  color: var(--cream);
  max-width: 13ch;
  margin-bottom: 2rem;
}

.marco-hero__actions{
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.marco-btn{
  display: inline-block;
  padding: 1rem 1.6rem;
  background: var(--orange);
  color: #fff;
  text-decoration: none;
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 1px solid transparent;
  transition: all 0.25s ease;
}

.marco-btn:hover{
  opacity: 0.92;
  text-decoration: none;
}

.marco-btn--ghost{
  background: transparent;
  border-color: rgba(245,241,232,0.7);
  color: var(--cream);
}

.marco-page{
  max-width: 1200px;
  margin: 0 auto;
  padding: 5rem 2rem;
}

.section-kicker{
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 0.75rem;
}

/* Intro */
.marco-intro__grid{
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  gap: 3rem;
  align-items: start;
}

.marco-intro h2,
.marco-process h2,
.marco-focus h2,
.marco-works h2,
.marco-cta h2{
  font-size: clamp(2rem, 3.5vw, 3rem);
  line-height: 1.05;
  margin-bottom: 1rem;
}

.marco-intro p{
  margin-bottom: 1.25rem;
}

.marco-meta-card{
  border-top: 1px solid rgba(17,17,17,0.12);
  padding-top: 1rem;
  margin-bottom: 1.5rem;
}

.marco-meta-title{
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--orange);
  margin-bottom: 0.35rem;
}

/* Process */
.marco-process{
  margin-top: 7rem;
}

.marco-process__grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 2rem;
}

.process-card{
  border: 1px solid rgba(17,17,17,0.12);
  padding: 1.5rem;
  background: rgba(255,255,255,0.3);
}

.process-card h3{
  font-size: 1.2rem;
  margin-bottom: 0.75rem;
}

/* Focus */
.marco-focus{
  margin-top: 7rem;
}

.marco-focus__inner{
  max-width: 900px;
}

/* Works */
.marco-works{
  margin-top: 7rem;
}

.marco-works__head{
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2rem;
  margin-bottom: 2rem;
}

.marco-link{
  color: var(--orange);
  text-decoration: none;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.marco-works__grid{
  column-count: 3;
  column-gap: 1.5rem;
}

.marco-works .work-card{
  break-inside: avoid;
  margin-bottom: 1.5rem;
  overflow: hidden;
}

.marco-works .work-card img{
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.4s ease, opacity 0.35s ease;
}

.marco-works .work-card:hover img{
  transform: scale(1.02);
  opacity: 0.95;
}

/* CTA */
.marco-cta{
  margin-top: 7rem;
  padding-top: 3rem;
  border-top: 1px solid rgba(17,17,17,0.12);
}

.marco-cta__inner{
  max-width: 850px;
}

.marco-cta p{
  margin-bottom: 1.5rem;
}

/* Responsive */
@media (max-width: 950px){
  .marco-intro__grid{
    grid-template-columns: 1fr;
  }

  .marco-process__grid{
    grid-template-columns: 1fr;
  }

  .marco-works__grid{
    column-count: 2;
  }
}

@media (max-width: 700px){
  .marco-hero{
    min-height: 78vh;
    background-position: 68% center;
  }

  .marco-hero__inner{
    padding: 6rem 1.5rem 4rem;
  }

  .marco-works__head{
    flex-direction: column;
    align-items: flex-start;
  }

  .marco-works__grid{
    column-count: 1;
  }

  .marco-page{
    padding: 4rem 1.5rem;
  }
}
/* =========================
   HERO EDITORIAL MARCO
========================= */

.marco-hero-editorial {
  padding: 8rem 0 5rem;
  background: var(--cream);
}

.marco-hero-editorial__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;

  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 4rem;
  align-items: center;
}

.marco-hero-editorial__kicker {
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 1rem;
}

.marco-hero-editorial__title {
  font-size: clamp(2.5rem, 4.5vw, 4.8rem);
  line-height: 0.95;
  margin-bottom: 1.5rem;
  max-width: 11ch;
}

.marco-hero-editorial__text {
  max-width: 52ch;
  font-size: 1.05rem;
  opacity: 0.85;
  margin-bottom: 2rem;
}

.marco-hero-editorial__actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.marco-hero-editorial__media {
  position: relative;
}

.marco-hero-editorial__media img {
  width: 100%;
  display: block;
  object-fit: cover;
  aspect-ratio: 4 / 5;
  border: 1px solid rgba(17,17,17,0.12);
}

/* Responsive */
@media (max-width: 950px) {
  .marco-hero-editorial__inner {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .marco-hero-editorial__title {
    max-width: 100%;
  }

  .marco-hero-editorial__media {
    max-width: 420px;
  }
}
/* =========================
   LANDING EL ESTUDIO
========================= */

.studio-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 5rem 2rem;
}

.studio-hero__grid,
.studio-space__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}

.studio-hero h1,
.studio-philosophy h2,
.studio-space h2,
.studio-process h2,
.studio-cta h2 {
  font-size: clamp(2.2rem, 4vw, 4rem);
  line-height: 1.02;
  margin-bottom: 1rem;
}

.studio-hero__text,
.studio-philosophy p,
.studio-space p,
.studio-cta p {
  font-size: 1.02rem;
  max-width: 60ch;
  opacity: 0.88;
}

.studio-hero__media img,
.studio-space__media img {
  width: 100%;
  display: block;
  object-fit: cover;
  border: 1px solid rgba(17,17,17,0.12);
}

.studio-hero__media img {
  aspect-ratio: 4 / 5;
}

.studio-space__media img {
  aspect-ratio: 4 / 5;
}

.studio-philosophy,
.studio-values,
.studio-space,
.studio-process,
.studio-cta {
  margin-top: 7rem;
}

.studio-philosophy__inner,
.studio-cta__inner {
  max-width: 900px;
}

.studio-values__grid,
.studio-process__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.studio-value,
.process-card {
  border: 1px solid rgba(17,17,17,0.12);
  padding: 1.5rem;
  background: rgba(255,255,255,0.3);
}

.studio-value h3,
.process-card h3 {
  font-size: 1.15rem;
  margin-bottom: 0.7rem;
}

.studio-cta {
  padding-top: 3rem;
  border-top: 1px solid rgba(17,17,17,0.12);
}

@media (max-width: 950px) {
  .studio-hero__grid,
  .studio-space__grid,
  .studio-values__grid,
  .studio-process__grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .studio-page {
    padding: 4rem 1.5rem;
  }

  .studio-philosophy,
  .studio-values,
  .studio-space,
  .studio-process,
  .studio-cta {
    margin-top: 5rem;
  }
}
/* =========================
   CTA ESTUDIO — MEJORADO
========================= */

.studio-cta{
  margin-top: 7rem;
  background: var(--green);

  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.studio-cta__inner{
  max-width: 1200px;
  margin: 0 auto;
  padding: 5rem 2rem;

  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:4rem;
  align-items:center;
}

.studio-cta .section-kicker {
  color: var(--orange);
}

.studio-cta h2 {
  color: var(--cream);
  font-size: clamp(2.2rem, 4vw, 4rem);
  line-height: 1;
  margin-bottom: 1rem;
}

.studio-cta p {
  max-width: 58ch;
  color: rgba(245, 241, 232, 0.88);
}

.studio-cta__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}

.studio-cta__btn {
  display: inline-block;
  padding: 1rem 1.6rem;
  background: var(--orange);
  color: #fff;
  text-decoration: none;
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: all 0.25s ease;
}

.studio-cta__btn:hover {
  opacity: 0.9;
  text-decoration: none;
  transform: translateY(-2px);
}

.studio-cta__link {
  color: var(--cream);
  text-decoration: none;
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(245,241,232,0.45);
  padding-bottom: 0.2rem;
}

.studio-cta__link:hover {
  opacity: 0.7;
  text-decoration: none;
}

@media (max-width: 800px) {
  .studio-cta__inner {
    grid-template-columns: 1fr;
    padding: 3rem 1.5rem;
  }
}
/* WhatsApp flotante */
.whatsapp-floating{
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 62px;
  height: 62px;

  display: flex;
  align-items: center;
  justify-content: center;

  background: var(--orange);
  border-radius: 50%;

  z-index: 9999;

  box-shadow: 0 10px 25px rgba(0,0,0,.20);
  transition: .25s ease;
}

.whatsapp-floating svg{
  width: 30px;
  height: 30px;
  fill: #fff;
}

.whatsapp-floating:hover{
  background: var(--green);
  transform: translateY(-3px);
}

@media (max-width:768px){
  .whatsapp-floating{
    width: 56px;
    height: 56px;
    right: 18px;
    bottom: 18px;
  }
}
.notranslate{
  translate: no;
}