/* =========================================================================
   Asesoría Cofise — Los Dolores, Cartagena
   Dirección de arte: «Lo que entra y lo que sale».
   La firma son las dos flechas de su propio logo, redibujadas con geometría
   limpia. Paleta muestreada del panel de su recepción (violeta + ámbar),
   no del sector: para una asesoría, el reflejo sería navy + oro + crema.
   ========================================================================= */

:root{
  /* --- color, muestreado de su panel de marca --- */
  --violeta:       #3E2A6E;   /* campo grande. Blanco encima = 11,8:1 */
  --violeta-medio: #5A4393;   /* el del panel. Blanco encima = 7,3:1  */
  --violeta-hondo: #241645;   /* pie y velo                            */
  --lavanda:       #B2B2D6;
  --lavanda-pale:  #E4E2EF;
  --ambar:         #F0A055;   /* acento SOBRE oscuro (flechas, detalles) */
  --ambar-tinta:   #8A4A0C;   /* ámbar legible SOBRE papel = 6,6:1     */
  --papel:         #F3F1F7;   /* blanco frío con tinte lila, no crema  */
  --papel-2:       #E9E6F0;
  --tinta:         #171223;
  --tinta-suave:   #4A4358;
  --linea:         #D6D2E2;

  --maxw: 1180px;
  --pad: clamp(20px, 5vw, 56px);
  --sec: clamp(72px, 10vw, 132px);

  /* tipografía */
  --display: "Bricolage Grotesque", Georgia, serif;
  --cuerpo:  "Hanken Grotesk", system-ui, sans-serif;
  --mono:    "JetBrains Mono", ui-monospace, monospace;
  --t1: clamp(2.55rem, 8.4vw, 8.4rem);   /* hasta 134px */
  --t2: clamp(1.85rem, 4.4vw, 3.5rem);

  --ease: cubic-bezier(.22,.61,.36,1);
  --r: 4px;
}

*{ box-sizing:border-box; margin:0; padding:0 }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100% }
body{
  background:var(--papel); color:var(--tinta);
  font-family:var(--cuerpo); font-size:17px; line-height:1.62;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; height:auto }
a{ color:inherit; text-decoration:none }
::selection{ background:var(--ambar); color:var(--violeta-hondo) }
:focus-visible{ outline:3px solid var(--ambar); outline-offset:3px }

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad) }
.vh{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap }
.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--violeta); color:#fff; padding:12px 18px;
}
.skip:focus{ left:8px; top:8px }

/* ---------- piezas comunes ---------- */
.etiqueta{
  font-family:var(--mono); font-size:.75rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ambar-tinta);
  display:flex; align-items:center; gap:12px; margin-bottom:22px;
}
.etiqueta::before{ content:""; width:30px; height:2px; background:currentColor; flex:none }
.etiqueta--claro{ color:var(--ambar) }

.t2{
  font-family:var(--display); font-weight:800;
  font-size:var(--t2); line-height:.98; letter-spacing:-.032em;
  text-wrap:balance;
}
p{ text-wrap:pretty }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--cuerpo); font-weight:600; font-size:1rem;
  padding:16px 26px; border-radius:var(--r); border:2px solid transparent;
  cursor:pointer; transition:background-color .22s var(--ease), color .22s var(--ease), transform .22s var(--ease);
}
.btn--sol{ background:var(--violeta); color:#fff }
.btn--linea{ border-color:var(--violeta); color:var(--violeta) }
.btn--full{ width:100%; font-size:1.05rem }
.btn:active{ transform:scale(.97) }
@media (hover:hover){
  .btn--sol:hover{ background:var(--violeta-hondo) }
  .btn--linea:hover{ background:var(--violeta); color:#fff }
}

/* =========================================================================
   HEADER
   ========================================================================= */
.hdr{
  position:fixed; inset:0 0 auto 0; z-index:90;
  padding:18px 0; background:transparent;
}
.hdr.scrolled{
  background:rgba(36,22,69,.92);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  padding:11px 0; box-shadow:0 1px 0 rgba(255,255,255,.1);
}
.hdr__in{
  width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad);
  display:flex; align-items:center; gap:clamp(16px,3vw,44px);
}

.mark{ display:flex; align-items:center; gap:10px; color:#fff; flex:none }
.mark__ico{ width:30px; height:30px; flex:none }
.mark__txt{
  font-family:var(--display); font-weight:800; font-size:1.42rem;
  letter-spacing:-.045em;
}

.nav{ display:flex; gap:clamp(14px,2.2vw,30px); margin-left:auto }
.nav a{
  font-size:.95rem; font-weight:500; color:rgba(255,255,255,.9);
  padding:6px 0; border-bottom:2px solid transparent;
  transition:color .2s var(--ease), border-color .2s var(--ease);
}
.nav a.active{ color:#fff; border-bottom-color:var(--ambar) }
@media (hover:hover){ .nav a:hover{ color:#fff } }

/* Fondo sólido a propósito: es un CTA sobre una foto, y detrás puede caer
   cualquier cosa (aquí, la flecha ámbar). Sin él, el número deja de leerse. */
.hdr__tel{
  font-family:var(--mono); font-size:.8rem; letter-spacing:.04em; color:#fff;
  background:rgba(28,17,54,.78); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.45); padding:9px 15px; border-radius:var(--r);
  white-space:nowrap; transition:background-color .2s var(--ease), border-color .2s var(--ease);
}
.hdr__tel-lbl{ color:var(--ambar) }
@media (hover:hover){ .hdr__tel:hover{ background:rgba(255,255,255,.14); border-color:#fff } }

.burger{ display:none; background:none; border:0; width:42px; height:34px; padding:6px; cursor:pointer }
.burger span{ display:block; height:2px; background:#fff; margin:6px 0; transition:transform .25s var(--ease), opacity .25s var(--ease) }

/* =========================================================================
   PORTADA — foto a sangre, 100svh, texto encima
   ========================================================================= */
/* El fondo violeta NO es decorativo: si la foto no carga, el texto blanco
   seguiría siendo blanco sobre el papel claro del body, es decir invisible. */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:flex-end;
  overflow:hidden; background:var(--violeta-hondo);
}
.hero__media{ position:absolute; inset:0; display:block }
.hero__media img{
  width:100%; height:100%; object-fit:cover; object-position:center 42%;
}
.hero__veil{
  position:absolute; inset:0;
  background:
    linear-gradient(to top, rgba(19,11,38,.94) 0%, rgba(19,11,38,.84) 26%, rgba(19,11,38,.34) 58%, rgba(19,11,38,.12) 100%),
    linear-gradient(100deg, rgba(30,18,58,.62) 0%, rgba(30,18,58,.24) 44%, rgba(30,18,58,0) 74%);
}

/* --- LA FIRMA: las dos flechas de su logo. Una entra (↙), otra sale (↗).
       Van a los dos cuadrantes que el texto deja libres: la que entra baja
       desde arriba a la derecha y muerde el final del titular; la que sale
       sube por la derecha y se va de la página. Ninguna cruza texto. --- */
.flecha{ position:absolute; fill:var(--ambar); pointer-events:none }
.flecha--entra{
  width:clamp(280px,31vw,470px); right:2vw; top:10vh; z-index:3;
  transform:rotate(135deg); transform-origin:center;
}
.flecha--sale{
  width:clamp(210px,24vw,340px); right:-1vw; bottom:2vh; z-index:1;
  transform:rotate(-45deg); transform-origin:center;
  opacity:.8;
}

.hero__in{
  position:relative; z-index:2;
  width:100%; max-width:var(--maxw); margin-inline:auto;
  padding:0 var(--pad) clamp(56px,9vh,110px);
}

.hero__title{
  font-family:var(--display); font-weight:800; color:#fff;
  font-size:var(--t1); line-height:.9; letter-spacing:-.045em;
  display:flex; flex-direction:column; margin-bottom:clamp(20px,3vh,34px);
}
.hero__title .l2{ margin-left:.09em }
.hero__title .l3{ margin-left:.19em }

.hero__sub{
  color:var(--lavanda); font-size:clamp(1.05rem,1.9vw,1.4rem);
  max-width:33ch; margin-bottom:clamp(24px,4vh,40px); line-height:1.45;
}

.hero__meta{
  display:flex; align-items:center; flex-wrap:wrap; gap:14px;
  font-family:var(--mono); font-size:.78rem; letter-spacing:.04em;
  color:rgba(255,255,255,.94);
}
.hero__dot{ width:4px; height:4px; background:var(--ambar); flex:none }
.rating{ display:inline-flex; align-items:center; gap:8px }
.rating__g{ width:17px; height:17px; flex:none }
.rating strong{ font-size:1rem }
.rating__stars{ color:var(--ambar); letter-spacing:.06em }
.rating__n, .hero__where, .hero__now{ color:rgba(255,255,255,.86) }

/* =========================================================================
   BARRA DE ACCIONES — filete vertical, a todo el ancho
   ========================================================================= */
.acciones{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:1px; background:var(--violeta-medio);
  background-clip:content-box;      /* regla incondicional del kit */
  border-bottom:1px solid var(--violeta-medio);
}
.accion{
  background:var(--violeta); color:#fff;
  padding:clamp(24px,3.4vw,40px) clamp(18px,2.6vw,38px);
  display:grid; grid-template-columns:1fr auto; align-items:end; row-gap:6px;
  transition:background-color .22s var(--ease);
}
.accion__lbl{
  grid-column:1/-1; font-family:var(--mono); font-size:.75rem;
  letter-spacing:.18em; text-transform:uppercase; color:var(--ambar);
}
.accion__val{ font-family:var(--display); font-weight:600; font-size:clamp(1.05rem,2vw,1.5rem); letter-spacing:-.02em }
.accion__ir{ font-size:1.3rem; color:var(--ambar); transition:transform .22s var(--ease) }
.accion:active{ background:var(--violeta-hondo) }
@media (hover:hover){
  .accion:hover{ background:var(--violeta-hondo) }
  .accion:hover .accion__ir{ transform:translateX(6px) }
}

/* =========================================================================
   QUÉ HACEMOS
   ========================================================================= */
.serv{ padding:var(--sec) 0 }
.serv__head{ max-width:64ch; margin-bottom:clamp(38px,6vw,64px) }
.serv__lead{ margin-top:20px; font-size:1.12rem; color:var(--tinta-suave); max-width:52ch }

.serv__grid{
  display:grid; grid-template-columns:repeat(6,1fr);
  gap:1px; background:var(--linea);
  background-clip:content-box;      /* el bug de las franjas laterales */
  border:1px solid var(--linea);
}
/* 3+3 arriba, 2+2+2 abajo: la rejilla cierra sin celdas huérfanas */
.tarj{ background:var(--papel); padding:clamp(26px,3vw,40px); grid-column:span 2 }
.tarj--ancha{ grid-column:span 3 }
.tarj__f{
  display:block; width:38px; height:auto; fill:var(--ambar-tinta);
  transform:rotate(-45deg); transform-origin:left center; margin:6px 0 24px;
}
.tarj h3{
  font-family:var(--display); font-weight:800; font-size:clamp(1.4rem,2.5vw,2.05rem);
  letter-spacing:-.03em; line-height:1; margin-bottom:12px;
}
.tarj p{ color:var(--tinta-suave); font-size:1rem; margin-bottom:20px }
.tarj ul{ list-style:none; border-top:1px solid var(--linea) }
.tarj li{
  font-size:.94rem; padding:9px 0; border-bottom:1px solid var(--linea);
  color:var(--tinta);
}
.tarj li:last-child{ border-bottom:0; padding-bottom:0 }

/* =========================================================================
   CON QUIÉN HABLAS — banda violeta
   ========================================================================= */
.equipo{ background:var(--violeta); color:#fff; padding:var(--sec) 0 }
.equipo__in{ display:grid; grid-template-columns:1.08fr 1fr; gap:clamp(28px,4.4vw,64px); align-items:center }
.equipo__foto img{ width:100%; aspect-ratio:4/3; object-fit:cover; object-position:center 40% }
.equipo__txt p{ color:var(--lavanda); margin-top:20px; max-width:46ch }
.equipo__txt .t2{ color:#fff }

.cita{
  margin-top:clamp(26px,4vw,40px); padding-left:22px;
  border-left:3px solid var(--ambar);
}
.cita p{
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.02rem,1.7vw,1.28rem); line-height:1.42;
  color:#fff; max-width:none;
}
.cita b{ color:var(--ambar); font-weight:600 }
.cita footer{
  margin-top:16px; font-family:var(--mono); font-size:.75rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--lavanda);
}

/* =========================================================================
   RESEÑAS
   ========================================================================= */
.res{ padding:var(--sec) 0 }
.res__head{ margin-bottom:clamp(34px,5vw,54px) }
.res__nota{ display:flex; align-items:center; gap:20px }
.res__num{
  font-family:var(--display); font-weight:800; font-size:clamp(3.4rem,8vw,6rem);
  line-height:.82; letter-spacing:-.05em; color:var(--violeta);
}
.res__stars{ display:block; color:var(--ambar-tinta); font-size:1.15rem; letter-spacing:.1em }
.res__de{ font-size:.96rem; color:var(--tinta-suave) }

.res__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,26px) }
.op{ background:var(--papel-2); padding:clamp(22px,2.6vw,34px); display:flex; flex-direction:column }
.op__stars{ color:var(--ambar-tinta); letter-spacing:.1em; margin-bottom:16px }
.op blockquote{ font-size:1rem; color:var(--tinta); flex:1 }
.op figcaption{
  margin-top:22px; padding-top:16px; border-top:1px solid var(--linea);
  display:flex; align-items:center; gap:11px;
  font-family:var(--mono); font-size:.75rem; letter-spacing:.04em; color:var(--tinta-suave);
}
.op__ini{
  width:30px; height:30px; flex:none; display:grid; place-items:center;
  background:var(--violeta); color:#fff; font-size:.85rem; border-radius:50%;
}

/* =========================================================================
   LA OFICINA
   ========================================================================= */
.casa{ padding:0 0 var(--sec) }
.casa__head{ margin-bottom:clamp(26px,4vw,42px) }
.casa__grid{ display:grid; grid-template-columns:1.35fr 1fr 1fr; gap:clamp(10px,1.4vw,18px) }
.shot{ cursor:zoom-in; overflow:hidden; background:var(--papel-2) }
.shot img{
  width:100%; height:100%; aspect-ratio:4/3; object-fit:cover;
  transition:transform .4s var(--ease);
}
@media (hover:hover){ .shot:hover img{ transform:scale(1.04) } }

/* =========================================================================
   DÓNDE ESTAMOS
   ========================================================================= */
.donde{ padding:0 0 var(--sec) }
.donde__in{ display:grid; grid-template-columns:.95fr 1.05fr; gap:clamp(28px,4vw,60px); align-items:start }
.donde__dir{ font-style:normal; font-size:1.1rem; margin:24px 0 20px; color:var(--tinta) }

.estado{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:.78rem; letter-spacing:.04em;
  background:var(--papel-2); padding:10px 15px; margin-bottom:24px;
}
.punto{ width:9px; height:9px; border-radius:50%; background:var(--tinta-suave); flex:none }
.punto.open{ background:#1D7A45 }
.punto.closed{ background:var(--ambar-tinta) }

.horas{ width:100%; border-collapse:collapse; margin-bottom:28px }
.horas th, .horas td{
  text-align:left; padding:11px 4px; border-bottom:1px solid var(--linea);
  font-size:.96rem; font-weight:400;
}
.horas td{ text-align:right; font-family:var(--mono); font-size:.82rem; color:var(--tinta-suave) }
.horas .today th, .horas .today td{ color:var(--violeta); font-weight:600 }
.horas .today th::after{ content:" · hoy"; font-family:var(--mono); font-size:.7rem; color:var(--ambar-tinta) }

.donde__cta{ display:flex; flex-wrap:wrap; gap:12px }
.donde__mapa{ overflow:hidden; background:var(--papel-2) }
.donde__mapa iframe{ width:100%; height:clamp(340px,52vh,560px); border:0; display:block; filter:grayscale(.3) }

/* =========================================================================
   CONTACTO — banda violeta
   ========================================================================= */
.cont{ background:var(--violeta-hondo); color:#fff; padding:var(--sec) 0 }
.cont__in{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,72px); align-items:start }
.cont__txt .t2{ color:#fff }
.cont__txt p{ color:var(--lavanda); margin-top:20px; max-width:44ch }
.cont__txt a{ color:var(--ambar); text-decoration:underline; text-underline-offset:3px }

.form{ background:rgba(255,255,255,.06); padding:clamp(22px,3vw,36px); border:1px solid rgba(255,255,255,.16) }
.campo{ margin-bottom:18px }
.campo label{
  display:block; font-family:var(--mono); font-size:.75rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--lavanda); margin-bottom:8px;
}
.campo input, .campo textarea{
  width:100%; font-family:var(--cuerpo); font-size:1rem; color:#fff;
  background:rgba(0,0,0,.26); border:1px solid rgba(255,255,255,.28);
  padding:13px 15px; border-radius:var(--r); resize:vertical;
  transition:border-color .2s var(--ease), background-color .2s var(--ease);
}
.campo input:focus, .campo textarea:focus{ border-color:var(--ambar); background:rgba(0,0,0,.4) }
.check{ display:flex; gap:11px; align-items:flex-start; font-size:.92rem; color:var(--lavanda); margin-bottom:22px }
.check input{ margin-top:4px; accent-color:var(--ambar); flex:none; width:17px; height:17px }

.form__ok, .form__ko{ display:none; margin-top:16px; font-size:.95rem; padding:13px 16px }
.form__ok{ background:rgba(255,255,255,.1); color:#fff; border-left:3px solid var(--ambar) }
.form__ko{ background:rgba(255,255,255,.1); color:#fff; border-left:3px solid #F0A055 }
.form.sent .form__ok{ display:block }
.form.sent .campo, .form.sent .check, .form.sent button{ display:none }
.form.error .form__ko{ display:block }

/* =========================================================================
   PIE
   ========================================================================= */
.pie{ background:var(--violeta-hondo); color:var(--lavanda); padding:clamp(52px,7vw,84px) 0 34px; border-top:1px solid rgba(255,255,255,.14) }
.pie__grid{ display:grid; grid-template-columns:1.7fr 1fr 1fr 1fr; gap:clamp(26px,3.5vw,48px) }
.pie__marca .mark{ margin-bottom:16px }
.pie__marca p{ font-size:.95rem; max-width:34ch }
.pie__h{ font-family:var(--mono); font-size:.75rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ambar); margin-bottom:14px; font-weight:500 }
.pie__col p{ font-size:.95rem; line-height:1.75 }
.pie__col a{ color:#fff }
.pie__fax{ color:rgba(178,178,214,.78); font-size:.88rem }
@media (hover:hover){ .pie__col a:hover{ color:var(--ambar) } }

.pie__baja{
  margin-top:clamp(40px,5vw,64px); padding-top:24px; border-top:1px solid rgba(255,255,255,.16);
  display:flex; flex-wrap:wrap; gap:14px 26px; align-items:center; justify-content:space-between;
}
.pie__legal{ display:flex; flex-wrap:wrap; gap:20px; font-size:.88rem; order:1 }
.pie__copy{ font-size:.88rem; order:2 }
@media (hover:hover){ .pie__legal a:hover{ color:var(--ambar) } }

.demo-aviso{
  margin-top:20px; font-family:var(--mono); font-size:.72rem; letter-spacing:.03em;
  color:rgba(178,178,214,.66); line-height:1.6;
}

/* =========================================================================
   LIGHTBOX / BARRA MÓVIL
   ========================================================================= */
.lightbox img{ max-width:92vw; max-height:88vh; object-fit:contain }
.lightbox__close{
  position:absolute; top:18px; right:20px; z-index:2;
  background:none; border:0; color:#fff; font-size:2.6rem; line-height:1; cursor:pointer;
}

.callbar{ display:none }

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width:1000px){
  .serv__grid{ grid-template-columns:repeat(4,1fr) }
  .tarj{ grid-column:span 2 }
  .tarj--ancha{ grid-column:span 4 }
  .equipo__in, .donde__in, .cont__in{ grid-template-columns:1fr }
  .res__grid{ grid-template-columns:1fr 1fr }
  .pie__grid{ grid-template-columns:1fr 1fr }
}

@media (max-width:760px){
  .nav{
    position:fixed; inset:0 0 0 auto; width:min(84vw,320px);
    background:var(--violeta-hondo); flex-direction:column; justify-content:center;
    gap:26px; padding:0 34px; transform:translateX(100%);
    transition:transform .34s var(--ease); margin-left:0; z-index:95;
  }
  .nav.open{ transform:none }
  .nav a{ font-size:1.35rem; font-family:var(--display); font-weight:600 }
  .burger{ display:block; margin-left:auto; position:relative; z-index:96 }
  .hdr__tel{ display:none }

  .flecha--entra{ width:64vw; right:-11vw; top:9vh }
  .flecha--sale{ width:52vw; right:auto; left:-16vw; bottom:auto; top:34vh; opacity:.75 }
  .hero__title{ line-height:.94 }
  .hero__sub{ max-width:26ch }
  .hero__in{ padding-bottom:clamp(96px,14vh,140px) }

  .acciones{ grid-template-columns:1fr }
  .accion{ padding:20px var(--pad) }

  .serv__grid{ grid-template-columns:1fr }
  .tarj, .tarj--ancha{ grid-column:span 1 }

  .res__grid{ grid-template-columns:1fr }
  .casa__grid{ grid-template-columns:1fr 1fr }
  .casa__grid .shot:first-child{ grid-column:1/-1 }
  .pie__grid{ grid-template-columns:1fr }
  .pie__baja{ flex-direction:column; align-items:flex-start }

  /* barra fija de llamada */
  .callbar{
    display:grid; grid-template-columns:1fr 1fr; position:fixed; bottom:0; left:0; right:0;
    z-index:88; background:var(--violeta); border-top:1px solid var(--violeta-medio);
  }
  .callbar a{
    padding:15px 8px; text-align:center; color:#fff; font-weight:600; font-size:.98rem;
  }
  .callbar a:first-child{ border-right:1px solid var(--violeta-medio) }
  .callbar a:active{ background:var(--violeta-hondo) }
  body{ padding-bottom:56px }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  *{ transition-duration:.01ms !important; animation-duration:.01ms !important }
}