:root{
  --ink:#0e2431;
  --muted:#65727a;
  --cream:#f8f6f1;
  --sea:#2d5961;
  --white:#ffffff;
  --line:rgba(14,36,49,.12);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Arial,Helvetica,sans-serif;
  background:var(--cream);
  color:var(--ink);
}
a{color:inherit;text-decoration:none}

header{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  z-index:100;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:20px 6vw;
  background:var(--ink);
  color:#fff;
  transition:transform .35s ease;
  will-change:transform;
}

/* Estado oculto: el header se desliza hacia arriba */
header.is-hidden{
  transform:translateY(-100%);
}
.brand{
  display:flex;
  gap:16px;
  align-items:center;
  font-weight:700;
  letter-spacing:.14em;
  font-size:16.4px;
}
.brand-mark{
  width:46px;
  height:46px;
  border:1px solid rgba(255,255,255,.65);
  border-radius:50%;
  display:grid;
  place-items:center;
  font-family:Georgia,serif;
  font-size:18px;
}
nav{
  display:flex;
  gap:28px;
  font-size:15px;
}

.hero{
  min-height:60vh;
  position:relative;
  display:flex;
  align-items:center;
  background:
    radial-gradient(circle at 82% 18%,rgba(223,198,154,.30),transparent 25%),
    linear-gradient(120deg,#0b2633 0%,#173d49 52%,#6d8f91 100%);
  color:#fff;
  overflow:hidden;
}
.hero:before{
  content:"";
  position:absolute;
  right:-90px;
  top:120px;
  width:520px;
  height:520px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.10);
}
.hero:after{
  content:"";
  position:absolute;
  right:11vw;
  bottom:9vh;
  width:180px;
  height:180px;
  border-radius:50%;
  background:rgba(228,205,165,.25);
  filter:blur(2px);
}
/* --- Hero: capa de imagen difuminada --- */
.hero-media{
  position:absolute;
  inset:0;
  z-index:1;                      /* por encima del fondo, por debajo del texto */
  pointer-events:none;
  background-image:url("/assets/img/hero.jpg");
  background-size:cover;
  background-position:right center;
  background-repeat:no-repeat;

  /* Solo la mitad derecha visible */
  -webkit-mask-image:linear-gradient(
    to left,
    #000 0%,
    #000 35%,
    transparent 75%
  );
  mask-image:linear-gradient(
    to left,
    #000 0%,
    #000 35%,
    transparent 75%
  );

  /* Difuminado y fusión con el degradado */
  filter:blur(4.5px) saturate(.9);
  opacity:.65;
  /*mix-blend-mode:luminosity;       opcional, ver nota abajo */
}
.hero-copy{
  padding:18vh 6vw 10vh;
  max-width:980px;
  position:relative;
  z-index:2;
}
.eyebrow{
  text-transform:uppercase;
  letter-spacing:.18em;
  font-size:9.8px;
  opacity:.78;
  margin-bottom:24px;
}
.hero-tagline{
  margin-top:30px;
  font-family:Georgia,'Times New Roman',serif;
  font-size:clamp(23px,3.5vw,39.4px);
  font-weight:400;
  line-height:1.05;
  color:rgba(255,255,255,.92);
}
.hero-sub{
  margin-top:22px;
  font-size:14.8px;
  max-width:620px;
  line-height:1.5;
  color:rgba(255,255,255,.78);
}
.hero-actions{
  margin-top:36px;
  display:flex;
  gap:14px;
  flex-wrap:wrap;
}
.btn{
  padding:14px 20px;
  border-radius:999px;
  font-size:10.7px;
  border:1px solid rgba(255,255,255,.45);
}
.btn.primary{
  background:#fff;
  color:var(--ink);
  border-color:#fff;
}

section{padding:110px 6vw}

.intro{
  display:grid;
  grid-template-columns:.9fr 1.4fr;
  gap:6vw;
  align-items:start;
}
.intro-media .section-kicker{
  margin-bottom:12px;
}

.intro-media img{
  display:block;
  width:100%;
  height:auto;
  border-radius:24px;
  object-fit:cover;
  position:relative;
  z-index:1;
}
.section-kicker{
  font-size:9.8px;
  text-transform:uppercase;
  letter-spacing:.16em;
  color:var(--sea);
}
.intro-media-frame{
  position:relative;
}
/* La marca (SVG) hereda el color azul oscuro de la paleta */
.intro-media-frame img{
  color:var(--ink);
  width:100%;
  max-width: 600px;
  display:block;
  margin:0 auto;
}

.intro-media-frame::before{
  content:"";
  position:absolute;
  inset:-10px;                       /* sobresale 18px por cada lado */
  border-radius:36px;                /* un poco más que la imagen (24px) */
  background:#266f9481;                /* azul oscuro del hero */
  filter:blur(5px);
  opacity:.55;
  z-index:0;
  pointer-events:none;
}

.intro h2,.partner h2,.closing h2{
  font-family:Georgia,serif;
  font-size:clamp(31.2px,5vw,59px);
  font-weight:400;
  line-height:1.05;
  margin:0;
}
.intro p{
  font-size:16.4px;
  line-height:1.6;
  color:var(--muted);
  margin-top:8px;
  max-width:720px;
}

.services{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  padding-top:0;
}
.service{
  min-height:320px;
  border:1px solid var(--line);
  background:#fff;
  border-radius:24px;
  padding:34px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  transition:.25s ease;
}
.service:hover{
  transform:translateY(-5px);
  box-shadow:0 18px 50px rgba(14,36,49,.08);
}
.service .num{
  font-size:9.8px;
  letter-spacing:.15em;
  color:var(--muted);
}
.service h3{
  font-family:Georgia,serif;
  font-weight:400;
  font-size:27.9px;
  margin:0 0 10px;
}
.service p{
  color:var(--muted);
  line-height:1.5;
  margin:0;
  max-width:260px;
}

.partner{
  background:var(--ink);
  color:#fff;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:7vw;
  align-items:center;
  padding-top: 2%;
  padding-bottom: 2%;
}

.partner-card{
  min-height:360px;
  border-radius:30px;
  position:relative;
  overflow:hidden;
}

.partner-card img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

.partner-card:before{
  content:"MIUC";
  position:absolute;
  left:36px;
  bottom:30px;
  font-family:Georgia,serif;
  font-size:60.7px;
  color:#fff;
  opacity:.92;
}
.partner-card:after{
  content:"MARBELLA";
  position:absolute;
  top:34px;
  left:38px;
  font-size:9.8px;
  letter-spacing:.22em;
  color:#fff;
}
.partner-copy .tag{
  display:inline-block;
  border:1px solid rgba(255,255,255,.25);
  padding:9px 13px;
  border-radius:999px;
  font-size:12px;
  letter-spacing:.08em;
  margin-bottom:24px;
}
.partner-copy p{
  color:rgba(255,255,255,.72);
  font-size:14.8px;
  line-height:1.6;
  max-width:570px;
}
.mini-grid{
  margin-top:34px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
}
.mini{
  border-top:1px solid rgba(255,255,255,.18);
  padding-top:16px;
}
.mini strong{
  display:block;
  font-family:Georgia,serif;
  font-weight:400;
  font-size:19.7px;
  margin-bottom:5px;
}
.mini span{
  font-size:9.8px;
  color:rgba(255,255,255,.6);
}

.closing{
  text-align:center;
  padding-top:140px;
  padding-bottom:140px;
}
.closing h2{
  max-width:900px;
  margin:0 auto;
}
.closing p{
  color:var(--muted);
  margin:24px auto 34px;
  font-size:14.8px;
}
footer{
  padding:30px 6vw 40px;
  border-top:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  gap:20px;
  color:var(--muted);
  font-size:9.8px;
}

@media(max-width:900px){
  nav{display:none}
  .brand{font-size:12.3px}
  .brand-mark{width:40px;height:40px}
  .hero{min-height:86vh}
  .hero-copy{padding-top:20vh}
  .intro,.partner{grid-template-columns:1fr}
  .services{grid-template-columns:1fr}
  .partner-card{min-height:360px}
  .mini-grid{grid-template-columns:1fr}
}

/*-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+--+-+-+-+-+-+-+-+-+-+-+-+-+-

                        Contact form

-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+--+-+-+-+-+-+-+-+-+-+-+-+-+-*/
.page-contact{
  padding-top:86px;
}

.contact-block{
  max-width:640px;
  margin:0 auto;
  text-align:center;
  padding-top:60px;
}

.contact-block h2{
  font-family:Georgia,serif;
  font-weight:400;
  font-size:clamp(24px,3.2vw,40px);
  line-height:1.1;
  margin:0;
}

.contact-block > p{
  color:var(--muted);
  margin:24px auto 40px;
  font-size:16.4px;
}

.contact-form{
  text-align:left;
  display:flex;
  flex-direction:column;
  gap:20px;
}

.form-field{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.form-field label{
  font-size:10.7px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
}

.form-field input,
.form-field textarea{
  font-family:Arial,Helvetica,sans-serif;
  font-size:14.8px;
  color:var(--ink);
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px;
  padding:14px 16px;
  outline:none;
  transition:border-color .2s ease;
}

.form-field input:focus,
.form-field textarea:focus{
  border-color:var(--sea);
}

.form-field textarea{
  resize:vertical;
  min-height:140px;
}

/* Fila de dos campos en el mismo renglón */
.form-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
}

@media (max-width:600px){
  .form-row{
    grid-template-columns:1fr;
    gap:20px;
  }
}

/* Honeypot: oculto visualmente pero presente en el DOM */
.hidden{
  position:absolute;
  overflow:hidden;
  clip:rect(0 0 0 0);
  height:1px;
  width:1px;
  margin:-1px;
  padding:0;
  border:0;
}

.contact-form .btn{
  align-self:flex-start;
  background:var(--ink);
  color:#fff;
  border-color:var(--ink);
  cursor:pointer;
}
/*-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+--+-+-+-+-+-+-+-+-+-+-+-+-+-

                        Contact form

-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+--+-+-+-+-+-+-+-+-+-+-+-+-+-*/
/* ============================================
   Contact · fondo animado
   ============================================ */

.page-contact{
  position:relative;
  overflow-x:hidden;
  background:var(--cream);
  min-height:100vh;
}

/* Capa del fondo: degradado animado + blobs */
.contact-bg{
  position:fixed;
  inset:0;
  z-index:-1;
  overflow:hidden;
  pointer-events:none;
}

/* Degradado animado que se desplaza lentamente */
.contact-bg::before{
  content:"";
  position:absolute;
  inset:-30%;
  background:
    radial-gradient(circle at 20% 25%, rgba(223,198,154,.35), transparent 45%),
    radial-gradient(circle at 80% 75%, rgba(109,143,145,.40), transparent 50%),
    linear-gradient(135deg,
      var(--cream) 0%,
      #e9e4d8 35%,
      #c7d2d0 65%,
      #6d8f91 100%);
  background-size:180% 180%;
  animation:contactGradient 18s ease-in-out infinite;
}

@keyframes contactGradient{
  0%   { background-position:   0%   0%; }
  50%  { background-position: 100% 100%; }
  100% { background-position:   0%   0%; }
}

/* Blobs flotantes */
.blob{
  position:absolute;
  border-radius:50%;
  filter:blur(80px);
  opacity:.45;
  will-change:transform;
}

.blob-1{
  width:420px;
  height:420px;
  background:#6d8f91;
  top:10%;
  left:-8%;
  animation:blobFloat1 20s ease-in-out infinite;
}

.blob-2{
  width:360px;
  height:360px;
  background:#dfc69a;
  top:55%;
  right:-10%;
  animation:blobFloat2 24s ease-in-out infinite;
}

.blob-3{
  width:300px;
  height:300px;
  background:#173d49;
  bottom:-12%;
  left:35%;
  opacity:.30;
  animation:blobFloat3 28s ease-in-out infinite;
}

@keyframes blobFloat1{
  0%,100% { transform:translate(0,0) scale(1); }
  50%     { transform:translate(60px,-40px) scale(1.1); }
}

@keyframes blobFloat2{
  0%,100% { transform:translate(0,0) scale(1); }
  50%     { transform:translate(-70px,50px) scale(1.08); }
}

@keyframes blobFloat3{
  0%,100% { transform:translate(0,0) scale(1); }
  50%     { transform:translate(40px,-60px) scale(1.12); }
}

/* Respeta la preferencia de movimiento reducido */
@media (prefers-reduced-motion: reduce){
  .contact-bg::before,
  .blob{
    animation:none;
  }
}


.page-contact .contact-block,
.page-contact footer{
  position:relative;
  z-index:1;
}
@media (max-width:600px){
  .blob{
    filter:blur(50px);
    opacity:.35;
  }

  .blob-1{
    width:240px;
    height:240px;
  }

  .blob-2{
    width:200px;
    height:200px;
  }

  .blob-3{
    width:180px;
    height:180px;
  }
}
@media (max-width:600px){
  .blob-1{ animation-duration:40s; }
  .blob-2{ animation-duration:46s; }
  .blob-3{ animation-duration:52s; }
}

.page-services{
  padding-top:86px;
}

/* ============================================
   Contact · sección imagen + texto
   ============================================ */

.contact-feature{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:6vw;
  align-items:center;
  padding:80px 6vw 120px;
}

.contact-feature-copy h2{
  font-family:Georgia,serif;
  font-weight:400;
  font-size:clamp(27.9px,4vw,47.2px);
  line-height:1.1;
  margin:16px 0 0;
}

.contact-feature-copy p{
  color:var(--muted);
  font-size:16.4px;
  line-height:1.6;
  margin:20px 0 0;
  max-width:560px;
}

.contact-feature-copy .btn{
  display:inline-block;
  margin-top:28px;
  background:var(--ink);
  color:#fff;
  border-color:var(--ink);
}

.contact-feature-media img{
  display:block;
  width:100%;
  height:auto;
  border-radius:24px;
  object-fit:cover;
}

@media (max-width:900px){
  .contact-feature{
    grid-template-columns:1fr;
    gap:40px;
    padding:60px 6vw 80px;
  }
}

/* ============================================
   Services · hero fino
   ============================================ */

.hero-slim{
  min-height:44vh;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:80px 6vw;
  background:
    linear-gradient(rgba(11,38,51,.62), rgba(11,38,51,.62)),
    url("/assets/img/services-1.jpg") center/cover no-repeat;
  position:relative;
  overflow:hidden;
}

.hero-slim::before{
  content:"";
  position:absolute;
  right:-90px;
  top:60px;
  width:360px;
  height:360px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.10);
}

.hero-slim-copy{
  position:relative;
  z-index:2;
  max-width:820px;
}

.hero-slim-copy h1{
  font-family:Georgia,'Times New Roman',serif;
  font-weight:400;
  font-size:clamp(27.9px,4.4vw,51.2px);
  line-height:1.05;
  margin:0;
  color:rgba(255,255,255,.94);
}

.hero-slim-copy p{
  margin:20px auto 0;
  font-size:14.8px;
  line-height:1.5;
  color:rgba(255,255,255,.75);
  max-width:560px;
}

@media (max-width:900px){
  .hero-slim{
    min-height:38vh;
    padding:60px 6vw;
  }
}

/* ============================================
   Services · bloque con título vertical
   ============================================ */

.services-vertical{
  display:grid;
  grid-template-columns:.9fr auto 1.1fr;
  gap:5vw;
  align-items:center;
  padding:110px 6vw;
}

.services-vertical-media img{
  display:block;
  width:100%;
  height:auto;
  border-radius:24px;
  object-fit:cover;
}

.services-vertical-title{
  font-family:Georgia,serif;
  font-weight:400;
  font-size:clamp(20px,2.2vw,28px);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink);
  margin:0;
  white-space:nowrap;

  /* Texto vertical leyendo de abajo hacia arriba */
  writing-mode:vertical-rl;
  transform:rotate(180deg);

  /* Alineado a la altura del texto de la derecha */
  justify-self:center;
}

.services-vertical-copy p{
  color:var(--muted);
  font-size:16.4px;
  line-height:1.6;
  margin:0;
  max-width:560px;
}

/* En móvil el título pasa a horizontal */
@media (max-width:900px){
  .services-vertical{
    grid-template-columns:1fr;
    gap:32px;
    padding:70px 6vw;
  }

  .services-vertical-title{
    writing-mode:horizontal-tb;
    transform:none;
    white-space:normal;
    letter-spacing:.10em;
  }
  .services-vertical-copy{
    padding:28px 24px;
  }

  .services-vertical-copy::before{
    inset:-12px;
    filter:blur(22px);
  }
}
.services-vertical-copy{
  position:relative;
  padding:36px 40px;
  border-radius:24px;
  background:var(--ink);
  color:#fff;
  z-index:0;
}

.services-vertical-copy::before{
  content:"";
  position:absolute;
  inset:-16px;
  border-radius:32px;
  background:#0b2633;
  filter:blur(28px);
  opacity:.45;
  z-index:-1;
  pointer-events:none;
}

.services-vertical-copy p{
  position:relative;
  z-index:1;
  color:rgba(255,255,255,.88);
  font-size:16.4px;
  line-height:1.65;
  margin:0;
  max-width:none;
}


/* ============================================
   Services · FAQ con tarjetas 2×2
   ============================================ */

.faq{
  padding:60px 6vw 120px;
}

.faq-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:auto auto;
  gap:20px;
  max-width:1100px;
  margin:0 auto;
  position:relative;
}

.faq-item{
  position:relative;
  border-radius:24px;
  transition:opacity .35s ease, transform .35s ease;
}

/* Tarjeta de pregunta (estado por defecto) */
.faq-question{
  font-family:Georgia,serif;
  font-weight:400;
  font-size:clamp(18px,1.8vw,23px);
  line-height:1.25;
  color:var(--ink);
  background:#fff;
  border:1px solid var(--line);
  border-radius:24px;
  padding:32px 28px;
  margin:0;
  min-height:180px;
  display:flex;
  align-items:center;
  cursor:pointer;
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
}

.faq-question:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 40px rgba(14,36,49,.08);
}

/* Respuesta (oculta por defecto) */
.faq-answer{
  display:none;
  background:var(--ink);
  color:#fff;
  border-radius:24px;
  padding:32px 28px;
  height:100%;
  box-sizing:border-box;
  position:relative;
}

.faq-answer p{
  color:rgba(255,255,255,.88);
  font-size:15.5px;
  line-height:1.65;
  margin:0;
}

.faq-back{
  background:transparent;
  border:1px solid rgba(255,255,255,.30);
  color:rgba(255,255,255,.85);
  border-radius:999px;
  padding:7px 14px;
  font-size:10.7px;
  letter-spacing:.06em;
  cursor:pointer;
  margin-bottom:20px;
  transition:background .2s ease, border-color .2s ease;
}

.faq-back:hover{
  background:rgba(255,255,255,.10);
  border-color:rgba(255,255,255,.55);
}

/* --- Estado activo: una tarjeta clicada --- */

/* La pregunta clicada se queda donde está, pero la respuesta va a su columna opuesta.
   Para lograrlo, ocultamos todas las .faq-item y mostramos la clicada + posicionamos su respuesta. */

.faq-grid.is-active .faq-item:not(.is-open){
  opacity:0;
  pointer-events:none;
}

.faq-grid.is-active .faq-item:not(.is-open) .faq-question{
  visibility:hidden;
}

/* Cuando está abierta, la tarjeta contenedora desaparece visualmente,
   pero dejamos visible solo la .faq-question y la .faq-answer. */
.faq-grid.is-active .faq-item.is-open{
  background:transparent;
  position:static;
}

.faq-grid.is-active .faq-item.is-open .faq-question{
  cursor:default;
  box-shadow:none;
  transform:none;
}

.faq-grid.is-active .faq-item.is-open .faq-answer{
  display:block;
  position:absolute;
  top:0;
  height:100%;
  width:calc(50% - 10px);
  box-sizing:border-box;
}

/* Pregunta en columna izquierda → respuesta ocupa columna derecha */
.faq-item[data-faq="1"].is-open .faq-answer,
.faq-item[data-faq="3"].is-open .faq-answer{
  left:calc(50% + 10px);
}

/* Pregunta en columna derecha → respuesta ocupa columna izquierda */
.faq-item[data-faq="2"].is-open .faq-answer,
.faq-item[data-faq="4"].is-open .faq-answer{
  right:calc(50% + 10px);
}

@media (max-width:700px){
  .faq-grid{
    grid-template-columns:1fr;
  }

  .faq-grid.is-active .faq-item.is-open .faq-answer{
    position:relative;
    width:100%;
    margin-top:20px;
    left:auto;
    right:auto;
    top:auto;
    height:auto;
  }

  .faq-grid.is-active .faq-item:not(.is-open){
    display:none;
  }
}


/* ============================================
   Blog
   ============================================ */
.insights-hero {
  padding: 120px 6vw 60px;
  text-align: center;
}

.insights-hero h1 {
  font-family: Georgia, serif;
  font-weight: 400;
  font-size: clamp(31.2px, 5vw, 59px);
  margin: 20px 0 0;
}

.insights-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 30px;
  padding: 0 6vw 120px;
  max-width: 1200px;
  margin: 0 auto;
}

.insight-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 24px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.insight-img {
  width: 100%;
  height: 220px;
  object-fit: cover;
}

.insight-content {
  padding: 28px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.insight-date {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin-bottom: 12px;
}

.insight-title {
  font-family: Georgia, serif;
  font-weight: 400;
  font-size: 24px;
  line-height: 1.2;
  margin: 0 0 14px;
  color: var(--ink);
}

.insight-excerpt {
  color: var(--muted);
  font-size: 14.8px;
  line-height: 1.5;
  margin-bottom: 24px;
  flex: 1;
}

.insight-content .btn {
  align-self: flex-start;
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}