/* =========================================================
   MUGUI — Nueva versión
   Se carga DESPUÉS de style.min.css. Mismos colores y
   tipografías (Space Grotesk + Inter). La barra de clientes,
   el portafolio y el popup no se tocan.
   ========================================================= */

/* ---------- Tipografías: Playfair Display (títulos) + Montserrat (textos) ---------- */
:root{
  --f-display:'Playfair Display', Georgia, 'Times New Roman', serif;
  --f-body:'Montserrat', 'Helvetica Neue', Arial, sans-serif;
}
html{ font-variant-numeric:lining-nums; }
/* un solo azul en todo el sitio: el aguamarina del logo */
:root{ --blue-light:var(--teal); --teal-text:#000000; }
h1, h2, h3, h4{ font-weight:400; letter-spacing:-0.01em; line-height:1.15; }
h3{ font-weight:500; }
#hero h1{ font-size:clamp(2.1rem, 4.2vw, 3.6rem); font-weight:400; letter-spacing:-0.012em; line-height:1.14; }
#servicios-hero h1, #portafolio-hero h1{ font-weight:400; }
.lede, p{ font-weight:400; }
.step-num{ font-family:var(--f-body) !important; font-weight:600 !important; font-size:.78rem !important; letter-spacing:.1em; }
.contact-info .info-item a, .contact-info .info-item span{ font-family:var(--f-body); font-size:1rem; }
.faq-item summary{ font-weight:500; font-size:1.12rem; }
.carta-hook{ font-style:italic; font-weight:500; }
.svc-card h3{ font-weight:500; }
.box-grid .process-item h3{ font-weight:500; letter-spacing:-0.005em; }
footer h5{ font-weight:500; }
.btn, nav.main-nav a, .country-btn, .phone-code, .field input, .field select, .field textarea{ font-family:var(--f-body); }

/* ---------- Hero: palabras destacadas ---------- */
#hero h1 .accent-blue{
  font-style:italic;
  font-weight:600;
  color:var(--teal);
  text-shadow:0 2px 24px rgba(0,0,0,.35);
}

/* ---------- Cajas del inicio: planas, asimétricas, con icono sutil ---------- */
.box-grid.process-list{
  display:grid; grid-template-columns:repeat(12,1fr); gap:1rem; border-top:none; counter-reset:step;
}
.box-grid .process-item{
  --ic-f:brightness(0); --ic-o:.12;
  position:relative; display:block; overflow:hidden;
  grid-column:span 6; min-height:250px;
  padding:1.8rem; border:none; border-radius:6px;
  background:var(--paper-2); color:var(--navy);
  transition:opacity .9s var(--ease), transform .45s var(--ease);
}
.box-grid .process-item .step-num{ display:block; margin-bottom:1.5rem; font-size:.82rem; color:inherit; opacity:.6; }
.box-grid .process-item h3{ font-size:clamp(1.25rem,2vw,1.65rem); line-height:1.15; letter-spacing:-.01em; margin-bottom:.65rem; color:inherit; }
.box-grid .process-item p{
  max-width:44ch; padding-right:4.2rem; font-size:.96rem; line-height:1.55; color:inherit; opacity:.82;
  display:block; overflow:visible;
}
.box-grid .process-item .pixel-icon{
  position:absolute; right:1.3rem; bottom:1.2rem; width:78px; height:78px; pointer-events:none;
}
.box-grid .process-item .pixel-icon img,
.box-grid .process-item:hover .pixel-icon img{
  width:100%; height:100%; object-fit:contain; opacity:var(--ic-o); filter:var(--ic-f);
  transition:transform .5s var(--ease);
}
@media (hover:hover) and (pointer:fine){
  .box-grid .process-item.is-visible:hover{ transform:translateY(-4px); transition-delay:0s; }
  .box-grid .process-item:hover .pixel-icon img{ transform:scale(1.1) rotate(-4deg); }
}

/* Colores de las cajas: blanco, aguamarina del logo y amarillo */
.box-grid .process-item{ background:var(--white); color:var(--navy); --ic-f:brightness(0); --ic-o:.1; }
.box-grid .process-item strong{ font-weight:600; color:inherit; opacity:1; }

/* Cómo lo hacemos (fondo claro): 7 · 5 / 5 · 7 */
#nosotros .section-head{ max-width:none; margin-bottom:2.2rem; }
#nosotros .section-head .lede{ max-width:62ch; margin-top:.4rem; }
.box-grid-proceso .process-item{ box-shadow:inset 0 0 0 1px var(--line); }
.box-grid-proceso .process-item:nth-child(1){ grid-column:span 7; }
.box-grid-proceso .process-item:nth-child(2){ grid-column:span 5; background:#000; color:#fff; box-shadow:none; --ic-f:brightness(0) invert(1); --ic-o:.4; }
.box-grid-proceso .process-item:nth-child(3){ grid-column:span 5; background:var(--gold); color:#000; box-shadow:none; --ic-f:brightness(0) invert(1); --ic-o:.55; }
.box-grid-proceso .process-item:nth-child(4){ grid-column:span 7; }

/* Soluciones creativas (fondo navy): 7 · 5 / 4 · 3 · 5 */
#servicios .section-head{ max-width:none; margin-bottom:2.2rem; }
#servicios .section-head .lede{ max-width:56ch; margin-top:.4rem; }
#servicios .section-head .lede strong{ color:var(--paper); }
.box-grid-services .process-item{ grid-column:span 4; }
.box-grid-services .process-item:nth-child(1){ grid-column:span 7; }
.box-grid-services .process-item:nth-child(2){ grid-column:span 5; background:#000; color:#fff; --ic-f:brightness(0) invert(1); --ic-o:.4; }
.box-grid-services .process-item:nth-child(3){ grid-column:span 4; background:var(--gold); color:#000; --ic-f:brightness(0) invert(1); --ic-o:.55; }
.box-grid-services .process-item:nth-child(4){ grid-column:span 3; }
.box-grid-services .process-item:nth-child(5){ grid-column:span 5; background:#000; color:#fff; --ic-f:brightness(0) invert(1); --ic-o:.4; }
/* el CSS base de servicios pintaba texto claro: aquí se fuerza el color de cada caja */
#servicios .box-grid-services .process-item h3{ color:inherit; }
#servicios .box-grid-services .process-item p{ color:inherit; opacity:.85; }
#servicios .box-grid-services .process-item .step-num{ color:inherit; opacity:.6; }
#servicios .box-grid-services .process-item{ border:none; }
#servicios .servicios-cta{ margin-top:1.8rem; }

/* ---------- Paquetes (servicios.html) ---------- */
.svc-band::before, .svc-band::after{ content:none; display:none; }

.svc-list{ gap:.75rem; }
.svc-list li{ padding-left:1.7rem; line-height:1.45; }
.svc-list li::before{
  content:""; position:absolute; left:0; top:.12em;
  width:1.05rem; height:1.05rem; border-radius:50%; background:var(--teal);
}
.svc-list li::after{
  content:""; position:absolute; left:.36rem; top:.3em; width:.3rem; height:.52rem;
  border:solid var(--white); border-width:0 2px 2px 0; transform:rotate(45deg);
}
.svc-card.is-featured .svc-list li::before{ background:var(--gold); }
.svc-card.is-featured .svc-list li::after{ border-color:var(--navy); }

.svc-cards{ display:flex; flex-wrap:wrap; justify-content:center; gap:1rem; }
.svc-cards .svc-card{ flex:0 1 calc((100% - 2rem) / 3); min-width:230px; }
.svc-card .svc-list{ flex:1 1 auto; }
.svc-card .svc-btn{ margin-top:1.6rem; justify-content:center; width:100%; }
.svc-card.is-featured .svc-btn{ border-color:var(--gold); background:var(--gold); color:var(--navy); }
.svc-card.is-featured .svc-btn:hover{ background:var(--gold-soft); border-color:var(--gold-soft); color:var(--navy); }
.svc-card:not(.is-featured) .svc-btn:hover{ background:transparent; color:var(--navy); }

.svc-anim .svc-card{ transition:opacity .7s var(--ease), transform .45s var(--ease), box-shadow .45s var(--ease); }
.svc-anim .svc-card.is-featured.is-in{ transform:translateY(0) scale(1); box-shadow:0 22px 50px rgba(0,0,0,.22); }
@media (hover:hover) and (pointer:fine){
  .svc-anim .svc-card.is-in:hover{ transform:translateY(-6px) scale(1.04); box-shadow:0 26px 54px rgba(0,0,0,.22); transition-delay:0s; z-index:4; }
  .svc-anim .svc-card.is-featured.is-in:hover{ transform:translateY(-6px) scale(1.04); box-shadow:0 30px 64px rgba(0,0,0,.3); }
}

/* ---------- Tu mix creativo ---------- */
#svc-carta{ padding:clamp(3rem,6vw,5.5rem) 0; background:var(--white); }
.carta{
  position:relative; overflow:hidden;
  background:var(--white); color:var(--navy);
  border:1px solid var(--line); border-radius:6px;
  padding:clamp(2rem,5vw,4rem);
}
.carta-copy{ position:relative; z-index:1; max-width:600px; }
.carta h2{ color:var(--navy); font-size:clamp(2.2rem,5vw,3.8rem); line-height:1.02; letter-spacing:-.025em; }
.carta h2 em{ color:var(--teal); font-weight:500; }
.carta-hook{ margin-top:1rem; font-family:var(--f-display); font-size:1.2rem; font-weight:500; color:var(--teal-text); }
.carta-copy p:not(.carta-hook){ margin-top:.6rem; color:var(--ink-soft); font-size:1.02rem; line-height:1.65; }
.carta-copy .btn{ margin-top:1.8rem; }
.carta-icon{ position:absolute; right:clamp(1rem,4vw,3.5rem); bottom:50%; transform:translateY(50%); width:clamp(120px,22vw,260px); opacity:.07; pointer-events:none; }
@media (max-width:620px){ .carta-icon{ opacity:.05; right:-1rem; } }

/* ---------- Preguntas frecuentes ---------- */
#svc-faq{ padding:clamp(3.5rem,7vw,6rem) 0; background:var(--paper); }
#svc-faq .wrap{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.8fr); gap:clamp(2rem,5vw,5rem); align-items:start; }
.faq-head{ position:sticky; top:140px; }
.faq-head h2 em{ font-style:italic; font-weight:500; }
.faq-head p{ margin-top:1rem; color:var(--ink-soft); max-width:34ch; }
.faq-list{ border-top:1px solid var(--line); }
.faq-item{ border-bottom:1px solid var(--line); }
.faq-item summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  padding:1.25rem 0; font-family:var(--f-display); font-size:1.08rem; font-weight:500; color:var(--navy);
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary:hover{ color:var(--teal-text); }
.faq-plus{ position:relative; flex:none; width:16px; height:16px; }
.faq-plus::before, .faq-plus::after{
  content:""; position:absolute; left:0; top:50%; width:100%; height:2px; margin-top:-1px;
  background:currentColor; transition:transform .3s var(--ease);
}
.faq-plus::after{ transform:rotate(90deg); }
.faq-item[open] .faq-plus::after{ transform:rotate(0deg); }
.faq-a{ padding:0 2.5rem 1.4rem 0; }
.faq-a p{ color:var(--ink-soft); line-height:1.65; max-width:62ch; }
.faq-item[open] summary{ color:var(--navy); }

/* ---------- Formulario: país con banderas + teléfono con indicativo ---------- */
.country{ position:relative; }
.country-btn{
  display:flex; align-items:center; justify-content:space-between; gap:.6rem;
  width:100%; text-align:left; border:none; border-bottom:1px solid var(--line);
  background:transparent; padding:.6rem 0; font-size:1rem; color:var(--ink-soft);
  cursor:pointer; transition:border-color .3s var(--ease);
}
.country-btn:focus-visible, .country-btn[aria-expanded="true"]{ outline:none; border-color:var(--navy); }
.country-cur{ display:flex; align-items:center; gap:.6rem; min-width:0; }
.country-cur.has-value{ color:var(--navy); }
.country-caret{ flex:none; width:8px; height:8px; border:solid var(--navy); border-width:0 1.5px 1.5px 0; transform:rotate(45deg) translateY(-2px); transition:transform .3s var(--ease); }
.country-btn[aria-expanded="true"] .country-caret{ transform:rotate(-135deg) translateY(-2px); }
.country-list{
  position:absolute; top:calc(100% + 4px); left:0; right:0; z-index:30;
  max-height:260px; overflow-y:auto; background:var(--white);
  border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:0 18px 40px rgba(0,0,0,.14); padding:.3rem 0; display:none;
}
.country-list.open{ display:block; }
.country-list li[role="option"]{ display:flex; align-items:center; gap:.7rem; padding:.55rem .9rem; font-size:.95rem; color:var(--navy); cursor:pointer; }
.country-list li[role="option"]:hover, .country-list li.is-active{ background:var(--paper-2); }
.country-list li[aria-selected="true"]{ font-weight:600; }
.country-list li.country-group{ padding:.6rem .9rem .3rem; font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); }
.country img, .phone-flag img, .country-globe{ flex:none; width:22px; height:16px; border-radius:2px; object-fit:cover; box-shadow:0 0 0 1px rgba(0,0,0,.12); }
.country-globe{ display:inline-flex; align-items:center; justify-content:center; box-shadow:none; font-size:.95rem; line-height:1; }

.phone{ display:flex; align-items:center; gap:.8rem; border-bottom:1px solid var(--line); transition:border-color .3s var(--ease); }
.phone:focus-within{ border-color:var(--navy); }
.phone-code{ display:inline-flex; align-items:center; gap:.5rem; padding:.6rem .8rem .6rem 0; border-right:1px solid var(--line); white-space:nowrap; font-size:1rem; color:var(--navy); }
.phone-code b{ font-weight:500; }
.phone-flag{ display:inline-flex; align-items:center; font-size:.95rem; line-height:1; }
.field .phone input{ border:none; flex:1; min-width:0; }

/* ---------- Menú: que quepan los enlaces ---------- */
@media (max-width:1180px){ nav.main-nav ul{ gap:1.6rem; } }

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .box-grid.process-list{ grid-template-columns:repeat(2,1fr); }
  .box-grid-proceso .process-item, .box-grid-services .process-item,
  .box-grid-proceso .process-item:nth-child(n), .box-grid-services .process-item:nth-child(n){ grid-column:span 1; }
  .box-grid-services .process-item:nth-child(5){ grid-column:1 / -1; }
  #svc-faq .wrap{ grid-template-columns:1fr; }
  .faq-head{ position:static; }
}
@media (max-width:620px){
  .box-grid.process-list{ grid-template-columns:1fr; }
  .box-grid-services .process-item:nth-child(5){ grid-column:auto; }
  .box-grid .process-item{ min-height:0; }
  .box-grid .process-item p{ padding-right:3.4rem; }
  .box-grid .process-item .pixel-icon{ width:60px; height:60px; }
  .carta{ flex-direction:column; align-items:flex-start; }
}
@media (prefers-reduced-motion: reduce){
  .svc-anim .svc-card.is-in:hover{ transform:none; }
  .box-grid .process-item.is-visible:hover{ transform:none; }
}


/* =========================================================
   TÍTULOS Y TEXTOS
   ========================================================= */
/* Palabras destacadas en títulos: mismo estilo del título del header */
h1 em, h2 em{ font-style:italic; font-weight:500; color:var(--teal); }
#servicios h2 em, #servicios-hero h1 em, #portafolio-hero h1 em{ color:var(--teal); }
#servicios-hero h1 em, #portafolio-hero h1 .accent-blue{
  font-style:italic; font-weight:600; color:var(--teal); text-shadow:0 2px 24px rgba(0,0,0,.35);
}

/* Textos: frase normal con las ideas clave en negrita */
.lede strong, .faq-head p strong, .faq-a strong, .carta-copy strong, .foot-brand strong{ font-weight:600; color:var(--navy); }
#servicios-hero .lede strong, #portafolio-hero .lede strong, footer .foot-brand strong{ color:var(--paper); }


/* =========================================================
   AJUSTES 6: paquetes cuadrados + cajas asimétricas sin repetir color
   ========================================================= */

/* ---------- Paquetes: formato cuadrado (mismo efecto al pasar el cursor) ---------- */
.svc-card, .svc-card.is-featured{
  border-radius:0;
  background:var(--white);
  border:1px solid transparent;
  box-shadow:0 14px 34px rgba(0,0,0,.08);
  padding:2.2rem 1.8rem 1.8rem;
  overflow:hidden;
}
.svc-card.is-featured{ border:2px solid var(--teal); }
.svc-anim .svc-card.is-featured.is-in{ box-shadow:0 14px 34px rgba(0,0,0,.08); }
.svc-card h3, .svc-card.is-featured h3{
  font-size:clamp(1.55rem,2.2vw,1.95rem); font-weight:400; line-height:1.1; min-height:0; color:var(--navy);
}
.svc-card .svc-resumen, .svc-card.is-featured .svc-resumen{ margin-top:.8rem; font-size:.9rem; line-height:1.55; color:var(--ink-soft); }
.svc-card .svc-price, .svc-card.is-featured .svc-price{ color:var(--navy); font-size:1.5rem; }
.svc-card.is-featured .svc-price .svc-desde, .svc-card.is-featured .svc-unit{ color:var(--ink-soft); }

/* Etiqueta "Más popular": rectángulo aguamarina en la esquina */
.svc-band{
  top:0; right:0; left:auto; height:auto;
  padding:.45rem .95rem;
  background:var(--gold); color:#000;
  font-size:.66rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  display:block;
}

/* Lista: check fino, primer punto en negrita */
.svc-list, .svc-card.is-featured .svc-list{ margin-top:1.6rem; padding-top:0; border-top:none; gap:.85rem; }
.svc-list li, .svc-card.is-featured .svc-list li{ padding-left:1.75rem; font-size:.94rem; line-height:1.45; color:var(--navy); }
.svc-list li::before, .svc-card.is-featured .svc-list li::before{ content:none; display:none; }
.svc-list li::after, .svc-card.is-featured .svc-list li::after{
  content:""; position:absolute; left:.2rem; top:.28em; width:.32rem; height:.62rem;
  border:solid var(--teal); border-width:0 1.6px 1.6px 0; transform:rotate(45deg); background:none;
}
.svc-list li:first-child{ font-weight:600; }

/* Botón: mayúsculas espaciadas, cuadrado */
.svc-card .svc-btn, .svc-card.is-featured .svc-btn{
  border-radius:0; padding:1rem 1.2rem; margin-top:1.8rem;
  font-size:.74rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  background:transparent; color:var(--navy); border:1px solid var(--navy);
}
.svc-card:not(.is-featured) .svc-btn:hover{ background:var(--navy); border-color:var(--navy); color:var(--paper); }
.svc-card.is-featured .svc-btn, .svc-card.is-featured .svc-btn:hover{ background:var(--navy); border-color:var(--navy); color:var(--paper); }
.svc-card.is-featured .svc-btn:hover{ background:var(--teal); border-color:var(--teal); }

/* ---------- Cajas del inicio: más asimétricas y sin repetir color vecino ---------- */
.box-grid .process-item{
  display:flex; flex-direction:column; justify-content:space-between; gap:1.4rem;
  border-radius:4px;
}
.box-grid .process-item .step-num{ margin-bottom:0; }
.box-grid .process-item p{ padding-right:0; }

@media (min-width:901px){
  .box-grid.process-list{ grid-template-columns:repeat(12,1fr); grid-auto-rows:minmax(104px,auto); gap:1rem; }
  .box-grid .process-item{ min-height:0; padding:1.8rem 1.8rem 1.7rem; }
  .box-grid .process-item .pixel-icon{ width:68px; height:68px; }

  /* Cómo lo hacemos: blanco · aguamarina / amarillo · blanco */
  .box-grid-proceso .process-item:nth-child(1){ grid-column:1 / 5;  grid-row:1 / 5; background:var(--white); color:#000; }
  .box-grid-proceso .process-item:nth-child(2){ grid-column:5 / 13; grid-row:1 / 3; background:#000; color:#fff; }
  .box-grid-proceso .process-item:nth-child(3){ grid-column:5 / 9;  grid-row:3 / 5; background:var(--gold); color:#000; }
  .box-grid-proceso .process-item:nth-child(4){ grid-column:9 / 13; grid-row:3 / 5; background:var(--white); color:#000; }
  .box-grid-proceso .process-item:nth-child(1) .pixel-icon{ width:110px; height:110px; }
  .box-grid-proceso .process-item:nth-child(2) .pixel-icon{ width:92px; height:92px; }

  /* Soluciones creativas: bento 8+4 / 5+3+4 */
  .box-grid-services .process-item:nth-child(1){ grid-column:1 / 9;  grid-row:1 / 4; background:var(--white); color:#000; }
  .box-grid-services .process-item:nth-child(2){ grid-column:9 / 13; grid-row:1 / 3; background:#000; color:#fff; }
  .box-grid-services .process-item:nth-child(3){ grid-column:9 / 13; grid-row:3 / 6; background:var(--gold); color:#000; }
  .box-grid-services .process-item:nth-child(4){ grid-column:6 / 9;  grid-row:4 / 6; background:#000; color:#fff; }
  .box-grid-services .process-item:nth-child(5){ grid-column:1 / 6;  grid-row:4 / 6; background:var(--gold); color:#000; }
  .box-grid-services .process-item:nth-child(n+6){ grid-column:span 4; grid-row:auto; background:var(--white); color:#000; }
  .box-grid-services .process-item:nth-child(1) .pixel-icon{ width:130px; height:130px; }
  .box-grid-services .process-item:nth-child(3) .pixel-icon{ width:92px; height:92px; }
}
/* iconos claros según el color de cada caja */
.box-grid .process-item{ --ic-f:brightness(0); --ic-o:.1; }
.box-grid-proceso .process-item:nth-child(2), .box-grid-services .process-item:nth-child(2), .box-grid-services .process-item:nth-child(4){ --ic-f:brightness(0) invert(1); --ic-o:.4; }
.box-grid-proceso .process-item:nth-child(3), .box-grid-services .process-item:nth-child(3), .box-grid-services .process-item:nth-child(5){ --ic-f:brightness(0) invert(1); --ic-o:.55; }
.box-grid-proceso .process-item:nth-child(2), .box-grid-proceso .process-item:nth-child(3),
.box-grid-services .process-item:nth-child(n){ box-shadow:none; }
.box-grid-proceso .process-item:nth-child(1), .box-grid-proceso .process-item:nth-child(4){ box-shadow:inset 0 0 0 1px var(--line); }

/* móvil y tableta: una columna, colores en secuencia sin repetir */
@media (max-width:900px){
  .box-grid.process-list{ grid-template-columns:1fr; }
  .box-grid .process-item:nth-child(n){ grid-column:auto; grid-row:auto; min-height:190px; }
  .box-grid-services .process-item:nth-child(1){ background:var(--white); color:#000; }
  .box-grid-services .process-item:nth-child(2){ background:#000; color:#fff; }
  .box-grid-services .process-item:nth-child(3){ background:var(--gold); color:#000; }
  .box-grid-services .process-item:nth-child(4){ background:#000; color:#fff; }
  .box-grid-services .process-item:nth-child(5){ background:var(--gold); color:#000; }
  .box-grid-proceso .process-item:nth-child(1){ background:var(--white); color:#000; }
  .box-grid-proceso .process-item:nth-child(2){ background:#000; color:#fff; }
  .box-grid-proceso .process-item:nth-child(3){ background:var(--gold); color:#000; }
  .box-grid-proceso .process-item:nth-child(4){ background:var(--white); color:#000; }
}
@media (max-width:620px){
  .svc-card, .svc-card.is-featured{ padding:2.2rem 1.4rem 1.6rem; }
}


/* =========================================================
   AJUSTES 7: texto ordenado arriba-izquierda, banner de video, un solo azul
   ========================================================= */
.box-grid .process-item{
  display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start;
  text-align:left; gap:0;
  padding:2rem 2rem 5.8rem;
}
.box-grid .process-item .step-num{ align-self:flex-start; text-align:left; margin:0 0 1.4rem; }
.box-grid .process-item > div{ width:100%; text-align:left; }
.box-grid .process-item h3{ margin:0 0 .7rem; font-size:clamp(1.3rem,1.75vw,1.6rem); text-align:left; overflow-wrap:break-word; }
.box-grid .process-item p{ max-width:46ch; margin:0; text-align:left; }
.box-grid .process-item .pixel-icon{ right:1.5rem; bottom:1.4rem; width:62px; height:62px; }

/* ---------- Banner de video ---------- */
#separador{ padding:0; background:var(--navy); line-height:0; }
.sep-banner{ position:relative; width:100%; height:clamp(230px,36vw,470px); overflow:hidden; background:var(--navy); }
.sep-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }
.sep-banner::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(0,0,0,.18) 0%, rgba(0,0,0,.38) 100%);
}

@media (max-width:900px){
  .box-grid .process-item:nth-child(n){ min-height:0; }
}
@media (max-width:620px){
  .box-grid .process-item{ padding:1.6rem 1.5rem 5.2rem; }
  .sep-banner{ height:clamp(200px,52vw,300px); }
}


/* =========================================================
   AJUSTES 8: Cómo lo hacemos (largo·corto / corto·largo), colores y un solo tamaño de icono
   ========================================================= */
/* Todos los iconos del mismo tamaño */
.box-grid .process-item .pixel-icon,
.box-grid .process-item:nth-child(n) .pixel-icon{ width:68px; height:68px; }

@media (min-width:901px){
  /* Cómo lo hacemos: fila 1 largo + corto, fila 2 corto + largo */
  .box-grid-proceso .process-item:nth-child(1){ grid-column:1 / 9;  grid-row:1 / 3; background:var(--white); color:#000; }
  .box-grid-proceso .process-item:nth-child(2){ grid-column:9 / 13; grid-row:1 / 3; background:#000; color:#fff; }
  .box-grid-proceso .process-item:nth-child(3){ grid-column:1 / 5;  grid-row:3 / 5; background:#000; color:#fff; }
  .box-grid-proceso .process-item:nth-child(4){ grid-column:5 / 13; grid-row:3 / 5; background:var(--gold); color:#000; }

  /* Soluciones creativas: Social Media en blanco; el resto se reacomoda sin repetir color vecino */
  .box-grid-services .process-item:nth-child(1){ background:#000; color:#fff; }
  .box-grid-services .process-item:nth-child(2){ background:var(--gold); color:#000; }
  .box-grid-services .process-item:nth-child(3){ background:var(--white); color:#000; }
  .box-grid-services .process-item:nth-child(4){ background:var(--gold); color:#000; }
  .box-grid-services .process-item:nth-child(5){ background:var(--white); color:#000; }
}

/* color del icono según el fondo de cada caja */
.box-grid .process-item{ --ic-f:brightness(0); --ic-o:.1; }
.box-grid-proceso .process-item:nth-child(2), .box-grid-proceso .process-item:nth-child(3),
.box-grid-services .process-item:nth-child(1){ --ic-f:brightness(0) invert(1); --ic-o:.4; }
.box-grid-proceso .process-item:nth-child(4),
.box-grid-services .process-item:nth-child(2), .box-grid-services .process-item:nth-child(4){ --ic-f:brightness(0) invert(1); --ic-o:.55; }
.box-grid-proceso .process-item:nth-child(1), .box-grid-services .process-item:nth-child(3), .box-grid-services .process-item:nth-child(5){ --ic-f:brightness(0); --ic-o:.1; }
.box-grid-proceso .process-item:nth-child(1), .box-grid-proceso .process-item:nth-child(4){ box-shadow:none; }
.box-grid-proceso .process-item:nth-child(1){ box-shadow:inset 0 0 0 1px var(--line); }

/* una columna: secuencia sin colores repetidos */
@media (max-width:900px){
  .box-grid-proceso .process-item:nth-child(1){ background:var(--white); color:#000; order:1; }
  .box-grid-proceso .process-item:nth-child(2){ background:#000; color:#fff; order:2; }
  .box-grid-proceso .process-item:nth-child(4){ background:var(--gold); color:#000; order:3; }
  .box-grid-proceso .process-item:nth-child(3){ background:#000; color:#fff; order:4; }
  .box-grid-services .process-item:nth-child(1){ background:#000; color:#fff; }
  .box-grid-services .process-item:nth-child(2){ background:var(--gold); color:#000; }
  .box-grid-services .process-item:nth-child(3){ background:var(--white); color:#000; }
  .box-grid-services .process-item:nth-child(4){ background:var(--gold); color:#000; }
  .box-grid-services .process-item:nth-child(5){ background:var(--white); color:#000; }
}


/* ---------- Banner: sin oscurecer el video ---------- */
.sep-banner::after{ content:none; display:none; }


/* =========================================================
   AJUSTES 9: "Cómo lo hacemos" con el título arriba y las cajas debajo, a todo el ancho
   ========================================================= */
#nosotros .wrap{ display:block; }
#nosotros .section-head{ max-width:none; margin-bottom:2.2rem; }
.box-grid .process-item h3{ overflow-wrap:normal; word-break:normal; hyphens:manual; }

/* Celular y tableta: "Cómo lo hacemos" conserva el orden 01 a 04 y alterna colores sin repetir */
@media (max-width:900px){
  .box-grid-proceso .process-item:nth-child(n){ order:0; }
  .box-grid-proceso .process-item:nth-child(1){ background:var(--white); color:#000; box-shadow:inset 0 0 0 1px var(--line); --ic-f:brightness(0); --ic-o:.1; }
  .box-grid-proceso .process-item:nth-child(2){ background:#000; color:#fff; box-shadow:none; --ic-f:brightness(0) invert(1); --ic-o:.4; }
  .box-grid-proceso .process-item:nth-child(3){ background:var(--gold); color:#000; box-shadow:none; --ic-f:brightness(0) invert(1); --ic-o:.55; }
  .box-grid-proceso .process-item:nth-child(4){ background:var(--white); color:#000; box-shadow:inset 0 0 0 1px var(--line); --ic-f:brightness(0); --ic-o:.1; }
}

/* Paquetes: los puntos de la lista mantienen el mismo espacio aunque la tarjeta se estire */
.svc-list{ align-content:start; }


/* ---------- Barra de clientes: logos más grandes ---------- */
#clientes .marquee{ padding:.9rem 0; }
.marquee-track{ gap:clamp(3.5rem,7vw,6.5rem); }
.marquee-track img{ height:clamp(58px,5.6vw,76px); width:auto; max-width:260px; object-fit:contain; }
@media (max-width:620px){
  #clientes .marquee{ padding:.7rem 0; }
  .marquee-track img{ height:54px; max-width:180px; }
}


/* =========================================================
   NEGRO + AMARILLO: mismo diseño; azules -> negro, aguamarina -> amarillo
   ========================================================= */
/* El fondo del hero era azul: se pasa a escala de grises (negro y luz) */
.hero-bg, .hero-video{ filter:grayscale(1) contrast(1.05); }
#hero::after{ background:linear-gradient(180deg,rgba(0,0,0,.38) 0,rgba(0,0,0,.52) 55%,rgba(0,0,0,.85) 100%) !important; }
#portafolio-hero::after, #servicios-hero::after{ background:linear-gradient(180deg,rgba(0,0,0,.55) 0,rgba(0,0,0,.80) 100%) !important; }
#portafolio-hero, #servicios-hero{ background:#000; }
/* Palabras resaltadas (antes aguamarina) en amarillo */
#hero h1 .accent-blue{ color:#ffc200; text-shadow:0 2px 24px rgba(0,0,0,.45); }
.scroll-mouse::after{ background:#fff; }


/* =========================================================
   TEXTO BLANCO SOBRE NEGRO + CAJAS DEL HOME BLANCAS Y AMARILLAS
   ========================================================= */
/* ---- Texto blanco en todo lo que tiene fondo negro ---- */
#hero h1, #hero .lede, #hero .scroll-cue, .scroll-cue{ color:#fff; }
#hero h1 .accent-blue{ color:#ffc200; }
#servicios .section-head h2, #servicios .servicios-quote{ color:#fff; }
#servicios .section-head .lede, #servicios .section-head .lede strong{ color:rgba(255,255,255,.82); }
#servicios .section-head .lede strong{ color:#fff; }
#servicios h2 em{ color:#ffc200; }
#servicios-hero h1, #portafolio-hero h1{ color:#fff; }
#servicios-hero h1 em, #portafolio-hero h1 em, #portafolio-hero h1 .accent-blue{ color:#ffc200; }
#servicios-hero .lede, #portafolio-hero .lede{ color:rgba(255,255,255,.82); }
#servicios-hero .lede strong, #portafolio-hero .lede strong{ color:#fff; }
#servicios-hero .back-home, #portafolio-hero .back-home{ color:rgba(255,255,255,.85); border-bottom-color:rgba(255,255,255,.35); }
#servicios-hero .back-home:hover, #portafolio-hero .back-home:hover{ color:#fff; border-color:#fff; }
#svc-cta h2{ color:#fff; } #svc-cta p{ color:rgba(255,255,255,.82); }
footer{ color:rgba(255,255,255,.78); }
footer h5, footer .foot-brand strong, footer ul li a:hover{ color:#fff; }
#cookie-banner, #cookie-banner p, #cookie-banner a{ color:#fff; }
.mobile-nav a{ color:#fff; }
.whatsapp-bubble, .wa-panda-bubble{ color:#fff; }
.pf-overlay h4, .pf-modal-info, .pf-modal-info h3, .pf-modal-desc{ color:#fff; }
.pf-modal-desc{ color:rgba(255,255,255,.85); }

/* ---- Cajas del home: solo blanco y amarillo; las blancas con sombra (sin borde) ---- */
.box-grid .process-item{ box-shadow:0 12px 30px rgba(0,0,0,.14), 0 2px 6px rgba(0,0,0,.08) !important; border:none !important; }
.box-grid .process-item:nth-child(n){ color:#000 !important; }
.box-grid .process-item h3, .box-grid .process-item p, .box-grid .process-item .step-num, .box-grid .process-item strong{ color:#000 !important; }
.box-grid .process-item .pixel-icon img{ filter:brightness(0) !important; }

/* Cómo lo hacemos, escritorio: 1 blanca · 2 amarilla / 3 amarilla · 4 blanca */
@media (min-width:901px){
  .box-grid-proceso .process-item:nth-child(1), .box-grid-proceso .process-item:nth-child(4){ background:#fff !important; --ic-o:.12 !important; }
  .box-grid-proceso .process-item:nth-child(2), .box-grid-proceso .process-item:nth-child(3){ background:#ffc200 !important; --ic-o:.3 !important; }
  /* Soluciones creativas, escritorio */
  .box-grid-services .process-item:nth-child(1), .box-grid-services .process-item:nth-child(3), .box-grid-services .process-item:nth-child(5){ background:#fff !important; --ic-o:.12 !important; }
  .box-grid-services .process-item:nth-child(2), .box-grid-services .process-item:nth-child(4){ background:#ffc200 !important; --ic-o:.3 !important; }
}
/* Celular y tableta: una columna, alternando blanco / amarillo */
@media (max-width:900px){
  .box-grid .process-item:nth-child(odd){ background:#fff !important; --ic-o:.12 !important; }
  .box-grid .process-item:nth-child(even){ background:#ffc200 !important; --ic-o:.3 !important; }
}
/* Iconos: tenues sobre blanco, un poco más marcados sobre amarillo */

/* Logo del menú más grande */
.brand img{ height:54px; width:auto; }
#site-header{ padding:1rem 0; }
#site-header.scrolled{ padding:.7rem 0; }
@media (max-width:620px){
  .brand img{ height:44px; }
  #site-header{ padding:.8rem 0; }
}

/* =========================================================
   Selector de idioma ES / EN (cabecera)
   ========================================================= */
.header-actions{ display:flex; align-items:center; gap:.75rem; }
.lang-switch{
  display:inline-flex; align-items:center; padding:3px; gap:2px;
  border:1px solid rgba(0,0,0,.18); border-radius:999px; background:#fff;
}
.lang-btn{
  appearance:none; border:0; background:transparent; cursor:pointer;
  font:600 .74rem/1 var(--f-body, 'Inter', sans-serif); letter-spacing:.06em;
  color:#000; padding:.42rem .68rem; border-radius:999px;
  transition:background .25s ease, color .25s ease;
}
.lang-btn:hover{ background:rgba(255,194,0,.35); }
.lang-btn.is-active{ background:#ffc200; color:#000; }
.lang-btn:focus-visible{ outline:2px solid #000; outline-offset:2px; }
@media (max-width:620px){
  .header-actions{ gap:.5rem; }
  .lang-btn{ padding:.38rem .55rem; font-size:.7rem; }
}

/* Enlace al panel de administración (footer): discreto, en la franja inferior */
footer .foot-right{ display:inline-flex; align-items:center; gap:.9rem; flex-wrap:wrap; }
footer .foot-admin-link{
  display:inline-block; margin:0; padding:0;
  font-size:.68rem; letter-spacing:.04em;
  color:rgba(255,255,255,.32); border:0;
  transition:color .3s ease;
}
footer .foot-admin-link:hover, footer .foot-admin-link:focus-visible{ color:rgba(255,255,255,.6); }
#cookie-banner, #cookie-banner p, #cookie-banner a{ color:#fff; }
.mobile-nav a{ color:#fff; }
.whatsapp-bubble, .wa-panda-bubble{ color:#fff; }
.pf-overlay h4, .pf-modal-info, .pf-modal-info h3, .pf-modal-desc{ color:#fff; }
.pf-modal-desc{ color:rgba(255,255,255,.85); }

/* ---- Cajas del home: solo blanco y amarillo; las blancas con sombra (sin borde) ---- */
.box-grid .process-item{ box-shadow:0 12px 30px rgba(0,0,0,.14), 0 2px 6px rgba(0,0,0,.08) !important; border:none !important; }
.box-grid .process-item:nth-child(n){ color:#000 !important; }
.box-grid .process-item h3, .box-grid .process-item p, .box-grid .process-item .step-num, .box-grid .process-item strong{ color:#000 !important; }
.box-grid .process-item .pixel-icon img{ filter:brightness(0) !important; }

/* Cómo lo hacemos, escritorio: 1 blanca · 2 amarilla / 3 amarilla · 4 blanca */
@media (min-width:901px){
  .box-grid-proceso .process-item:nth-child(1), .box-grid-proceso .process-item:nth-child(4){ background:#fff !important; --ic-o:.12 !important; }
  .box-grid-proceso .process-item:nth-child(2), .box-grid-proceso .process-item:nth-child(3){ background:#ffc200 !important; --ic-o:.3 !important; }
  /* Soluciones creativas, escritorio */
  .box-grid-services .process-item:nth-child(1), .box-grid-services .process-item:nth-child(3), .box-grid-services .process-item:nth-child(5){ background:#fff !important; --ic-o:.12 !important; }
  .box-grid-services .process-item:nth-child(2), .box-grid-services .process-item:nth-child(4){ background:#ffc200 !important; --ic-o:.3 !important; }
}
/* Celular y tableta: una columna, alternando blanco / amarillo */
@media (max-width:900px){
  .box-grid .process-item:nth-child(odd){ background:#fff !important; --ic-o:.12 !important; }
  .box-grid .process-item:nth-child(even){ background:#ffc200 !important; --ic-o:.3 !important; }
}
/* Iconos: tenues sobre blanco, un poco más marcados sobre amarillo */

/* Logo del menú más grande */
.brand img{ height:54px; width:auto; }
#site-header{ padding:1rem 0; }
#site-header.scrolled{ padding:.7rem 0; }
@media (max-width:620px){
  .brand img{ height:44px; }
  #site-header{ padding:.8rem 0; }
}

/* =========================================================
   Selector de idioma ES / EN (cabecera)
   ========================================================= */
.header-actions{ display:flex; align-items:center; gap:.75rem; }
.lang-switch{
  display:inline-flex; align-items:center; padding:3px; gap:2px;
  border:1px solid rgba(0,0,0,.18); border-radius:999px; background:#fff;
}
.lang-btn{
  appearance:none; border:0; background:transparent; cursor:pointer;
  font:600 .74rem/1 var(--f-body, 'Inter', sans-serif); letter-spacing:.06em;
  color:#000; padding:.42rem .68rem; border-radius:999px;
  transition:background .25s ease, color .25s ease;
}
.lang-btn:hover{ background:rgba(255,194,0,.35); }
.lang-btn.is-active{ background:#ffc200; color:#000; }
.lang-btn:focus-visible{ outline:2px solid #000; outline-offset:2px; }
@media (max-width:620px){
  .header-actions{ gap:.5rem; }
  .lang-btn{ padding:.38rem .55rem; font-size:.7rem; }
}


/* =========================================================
   ESQUINAS RECTAS: botones, filtros, cajas del portafolio y su ventana,
   igual que el resto de la web. (La burbuja y el botón de WhatsApp
   conservan su forma propia.)
   ========================================================= */
.btn, .btn-ghost, .btn-invert, .btn-carta, .btn-gold,
.header-actions .btn-ghost, #hero .hero-buttons .btn,
#cookie-accept-btn, .nav-toggle,
.lang-switch, .lang-btn,
.contact-info .socials a,
.pf-filter-btn, .svc-nav a,
.pf-card, .pf-modal-panel, .pf-modal-close, .pf-info-toggle,
.pf-modal-gallery img, .pf-modal-gallery video,
.country-list, .ac-list{
  border-radius:0 !important;
}
.pf-card img, .pf-card .pf-overlay{ border-radius:0 !important; }


/* Aviso breve del responsable de los datos, bajo el formulario */
.form-legal{ margin:0; font-size:.76rem; line-height:1.55; color:rgba(0,0,0,.58); }
.form-legal a{ color:#000; text-decoration:underline; text-underline-offset:2px; }
footer button[data-cookie-settings]{ color:inherit; }
footer button[data-cookie-settings]:hover{ color:#ffc200; }


/* Pie de página: contacto y redes bajo el logo */
footer .foot-brand img{ margin-bottom:1.5rem; }
footer .foot-contact{ list-style:none; margin:0 0 1.4rem; padding:0; display:grid; gap:.95rem; }
footer .foot-contact li{ display:grid; gap:.15rem; }
footer .foot-contact span{ font-size:.66rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.42); }
footer .foot-contact a, footer .foot-contact b{ color:#fff; font-weight:400; font-size:.95rem; line-height:1.4; }
footer .foot-contact a{ width:max-content; max-width:100%; word-break:break-word; transition:color .2s ease; }
footer .foot-contact a:hover{ color:#ffc200; }
footer .foot-socials{ display:flex; gap:.6rem; }
footer .foot-socials a{
  width:42px; height:42px; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid rgba(255,255,255,.28); border-radius:0; color:#fff;
  transition:background .2s ease, border-color .2s ease, color .2s ease;
}
footer .foot-socials a:hover{ background:#ffc200; border-color:#ffc200; color:#000; }


/* =========================================================
   PÁGINA "NOSOTROS"
   ========================================================= */
/* cabecera oscura (mismas reglas del portafolio completo) */
#nosotros-hero{position:relative;background:var(--navy);padding-top:clamp(8rem,14vw,10rem);padding-bottom:clamp(3rem,6vw,4.5rem);overflow:hidden}
#nosotros-hero::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,.55) 0,rgba(0,0,0,.78) 100%)}
#nosotros-hero .wrap{position:relative;z-index:2}
#nosotros-hero .eyebrow{color:var(--gold-soft);margin-bottom:1.2rem}
#nosotros-hero .eyebrow .sq-mini span{background:var(--gold)}
#nosotros-hero h1{color:var(--paper);font-size:clamp(2.1rem, 4vw, 3.3rem);font-weight:500;max-width:760px}
#nosotros-hero .lede{color:rgba(250,247,241,.72);max-width:600px;margin-top:1rem}
#nosotros-hero .back-home{display:inline-flex;align-items:center;gap:.5rem;margin-top:2rem;font-size:.85rem;color:rgba(250,247,241,.8);border-bottom:1px solid rgba(250,247,241,.3);padding-bottom:2px;transition:color .3s var(--ease),border-color .3s var(--ease)}
#nosotros-hero .back-home:hover{color:var(--paper);border-color:var(--paper)}
#servicios-hero h1, #nosotros-hero h1{ font-weight:400; }
#servicios h2 em, #servicios-hero h1 em, #nosotros-hero h1 em{ color:var(--teal); }
#servicios-hero h1 em, #nosotros-hero h1 .accent-blue{
  font-style:italic; font-weight:600; color:var(--teal); text-shadow:0 2px 24px rgba(0,0,0,.35);
}
#servicios-hero .lede strong, #nosotros-hero .lede strong, footer .foot-brand strong{ color:var(--paper); }
#nosotros-hero::after, #servicios-hero::after{ background:linear-gradient(180deg,rgba(0,0,0,.55) 0,rgba(0,0,0,.80) 100%) !important; }
#nosotros-hero, #servicios-hero{ background:#000; }
#servicios-hero h1, #nosotros-hero h1{ color:#fff; }
#servicios-hero h1 em, #nosotros-hero h1 em, #nosotros-hero h1 .accent-blue{ color:#ffc200; }
#servicios-hero .lede, #nosotros-hero .lede{ color:rgba(255,255,255,.82); }
#servicios-hero .lede strong, #nosotros-hero .lede strong{ color:#fff; }
#servicios-hero .back-home, #nosotros-hero .back-home{ color:rgba(255,255,255,.85); border-bottom-color:rgba(255,255,255,.35); }
#servicios-hero .back-home:hover, #nosotros-hero .back-home:hover{ color:#fff; border-color:#fff; }

.about-story, .about-team, .about-adn{ padding:clamp(4rem,8vw,7rem) 0; }
.about-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,5vw,5rem); align-items:center; }
.about-copy h2, .adn-copy h2, .about-h2, .about-cta h2{ font-size:clamp(2rem,3.6vw,3rem); line-height:1.12; letter-spacing:-.02em; margin:0 0 1.4rem; }
.about-lead{ font-size:clamp(1.1rem,1.5vw,1.3rem); line-height:1.6; color:#000; margin:0 0 1.2rem; }
.about-copy p, .adn-copy p{ max-width:60ch; }
.about-copy p:not(.about-lead), .adn-copy p:not(.about-lead){ color:rgba(0,0,0,.68); line-height:1.75; margin:0 0 1rem; }
.about-copy strong{ color:#000; }
.about-photo, .adn-photo{ margin:0; }
.about-photo img{ width:100%; height:auto; display:block; border-radius:0; }
.adn-photo img{ width:100%; aspect-ratio:4/5; object-fit:cover; display:block; border-radius:0; }

/* Equipo */
.about-team{ background:#fff; border-top:1px solid rgba(0,0,0,.08); border-bottom:1px solid rgba(0,0,0,.08); }
.team-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(1.2rem,3vw,2.4rem); margin-top:2.4rem; }
.team-card{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); background:var(--paper,#F5F4EF); border-radius:0; overflow:hidden; }
.team-photo{ margin:0; }
.team-photo img{ width:100%; height:100%; object-fit:cover; display:block; aspect-ratio:1/1; }
.team-info{ padding:clamp(1.3rem,2.4vw,2rem); display:flex; flex-direction:column; justify-content:center; gap:.5rem; }
.team-info h3{ font-size:clamp(1.8rem,2.6vw,2.4rem); margin:0; line-height:1.1; }
.team-role{ margin:0; font-size:.78rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:rgba(0,0,0,.6); }
.team-exp{ margin:.7rem 0 0; font-weight:600; color:#000; line-height:1.5; }
.team-adds{ margin:0; color:rgba(0,0,0,.68); line-height:1.65; font-size:.95rem; }

/* Banda negra con frase */
.about-band{ background:#000; padding:clamp(3.5rem,7vw,6rem) 0; }
.band-quote{ margin:0; color:#fff; font-family:var(--f-display,'Playfair Display',Georgia,serif); font-size:clamp(1.9rem,4.4vw,3.6rem); line-height:1.15; letter-spacing:-.02em; max-width:18ch; }
.band-quote em{ color:#ffc200; font-style:italic; }

/* ADN */
.adn-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(2rem,5vw,5rem); align-items:start; }
.pillars{ list-style:none; margin:clamp(3rem,6vw,5rem) 0 0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(1rem,2.4vw,2rem); }
.pillar{ border-top:3px solid #000; padding-top:1rem; }
.pillar-n{ display:block; font-size:.78rem; font-weight:600; letter-spacing:.14em; color:rgba(0,0,0,.55); margin-bottom:.5rem; }
.pillar h3{ font-size:1.2rem; line-height:1.25; margin:0 0 .5rem; }
.pillar p{ margin:0; color:rgba(0,0,0,.68); line-height:1.6; font-size:.95rem; }

/* Cierre amarillo */
.about-cta{ background:#ffc200; padding:clamp(3.5rem,7vw,6rem) 0; }
.about-cta h2{ color:#000; margin-bottom:.8rem; }
.about-cta p{ color:rgba(0,0,0,.78); font-size:1.1rem; max-width:52ch; margin:0 0 2rem; }
.cta-buttons{ display:flex; gap:.9rem; flex-wrap:wrap; }
.about-cta .btn:not(.btn-ghost){ background:#000; border-color:#000; color:#fff; }
.about-cta .btn:not(.btn-ghost):hover{ background:transparent; color:#000; }
.about-cta .btn-ghost{ background:transparent; border:1px solid #000; color:#000; }
.about-cta .btn-ghost:hover{ background:#000; color:#fff; }

/* Palabras destacadas dentro de títulos claros: negro sobre marcador amarillo (el amarillo solo no se lee sobre crema) */
.about-story h2 em, .about-team h2 em, .adn-copy h2 em{
  color:#000; font-style:italic;
  background:linear-gradient(transparent 62%, #ffc200 62%, #ffc200 94%, transparent 94%);
  padding:0 .1em; -webkit-box-decoration-break:clone; box-decoration-break:clone;
}

@media (max-width:900px){
  .about-grid, .adn-grid{ grid-template-columns:1fr; }
  .about-photo{ order:-1; }
  .team-grid{ grid-template-columns:1fr; }
  .pillars{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:560px){
  .team-card{ grid-template-columns:1fr; }
  .pillars{ grid-template-columns:1fr; }
  .band-quote{ max-width:none; }
}

/* =========================================================
   AJUSTES DE LA REVISIÓN DE DISEÑO
   ========================================================= */
/* Hero: contenido centrado en vertical (en celular quedaba pegado arriba) + línea de apoyo */
#hero{ align-items:center; }
#hero .hero-sub{ color:rgba(255,255,255,.86); font-size:clamp(1rem,1.5vw,1.2rem); line-height:1.6; max-width:34rem; margin:1.5rem auto 0; text-align:center; }
@media (max-width:620px){ #hero .hero-sub{ max-width:21rem; } }

/* Enlace "saltar al contenido" (solo se ve al navegar con teclado) */
.skip-link{ position:absolute; left:1rem; top:-5rem; z-index:10001; background:#ffc200; color:#000; padding:.75rem 1.1rem; font-weight:600; font-size:.9rem; border-radius:0; transition:top .2s ease; }
.skip-link:focus{ top:1rem; outline:2px solid #000; outline-offset:2px; }

/* Guía de Paquetes */
.svc-guide{ background:#fff; border-bottom:1px solid rgba(0,0,0,.08); padding:1.8rem 0 2rem; }
.svc-guide-title{ margin:0 0 1rem; font-weight:600; color:#000; font-size:1rem; }
.svc-guide-list{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.9rem; }
.svc-guide-list a{ display:flex; flex-direction:column; justify-content:space-between; gap:.9rem; height:100%; min-height:104px; padding:1.1rem 1.2rem; border:1px solid rgba(0,0,0,.16); background:var(--paper,#F5F4EF); color:#000; border-radius:0; transition:background .2s ease, border-color .2s ease, transform .2s ease; }
.svc-guide-list a:hover{ background:#ffc200; border-color:#ffc200; transform:translateY(-2px); }
.svc-guide-need{ font-family:var(--f-display,'Playfair Display',Georgia,serif); font-size:1.12rem; line-height:1.25; }
.svc-guide-go{ font-size:.82rem; font-weight:600; letter-spacing:.02em; color:rgba(0,0,0,.7); }
.svc-guide-go i{ font-style:normal; display:inline-block; transition:transform .2s ease; }
.svc-guide-list a:hover .svc-guide-go{ color:#000; }
.svc-guide-list a:hover .svc-guide-go i{ transform:translateX(3px); }
@media (max-width:900px){ .svc-guide-list{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:480px){ .svc-guide-list{ grid-template-columns:1fr; } .svc-guide-list a{ min-height:0; } }

/* Tipografía mínima de 12 px en etiquetas pequeñas (excepto los números de las cajas) */
footer .foot-contact span{ font-size:.75rem; }
.country-list li.country-group{ font-size:.75rem; }

/* Palabras destacadas en títulos sobre fondo CLARO: el amarillo solo se lee a 1,5:1 sobre el crema.
   Se escriben en negro sobre un marcador amarillo (contraste 13:1). Sobre negro siguen amarillas. */
#nosotros .section-head h2 em, #portafolio h2 em, #svc-carta h2 em, #svc-faq h2 em, .carta h2 em{
  color:#000 !important; font-style:italic; text-shadow:none !important;
  background:linear-gradient(transparent 62%, #ffc200 62%, #ffc200 94%, transparent 94%);
  padding:0 .1em; -webkit-box-decoration-break:clone; box-decoration-break:clone;
}

/* Zonas táctiles de al menos ~40 px en celular y tableta */
@media (max-width:900px){
  .lang-btn{ min-height:38px; padding:.5rem .8rem; display:inline-flex; align-items:center; }
  .back-home{ padding:.7rem 0 .55rem !important; }
  footer .foot-contact a{ display:inline-block; padding:.55rem 0; }
  footer .foot-contact li{ gap:0; }
  footer ul li a, footer button[data-cookie-settings]{ display:inline-block; padding:.5rem 0; }
  .pf-filter-btn{ min-height:40px; }
  .pf-modal-close{ width:40px; height:40px; }
}


/* Cabecera de Paquetes = Portafolio (mismo fondo en movimiento, misma capa oscura y misma tipografía) */
/* Cabecera de Paquetes = Portafolio */
#servicios-hero{position:relative;background:var(--navy);padding-top:clamp(8rem,14vw,10rem);padding-bottom:clamp(3rem,6vw,4.5rem);overflow:hidden}
#servicios-hero::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,.55) 0,rgba(0,0,0,.78) 100%)}
#servicios-hero .wrap{position:relative;z-index:2}
#servicios-hero .eyebrow{color:var(--gold-soft);margin-bottom:1.2rem}
#servicios-hero .eyebrow .sq-mini span{background:var(--gold)}
#servicios-hero h1{color:var(--paper);font-size:clamp(2.1rem, 4vw, 3.3rem);font-weight:500;max-width:760px}
#servicios-hero .lede{color:rgba(250,247,241,.72);max-width:600px;margin-top:1rem}
#servicios-hero .back-home{display:inline-flex;align-items:center;gap:.5rem;margin-top:2rem;font-size:.85rem;color:rgba(250,247,241,.8);border-bottom:1px solid rgba(250,247,241,.3);padding-bottom:2px;transition:color .3s var(--ease),border-color .3s var(--ease)}
#servicios-hero .back-home:hover{color:var(--paper);border-color:var(--paper)}
#servicios-hero h1, #servicios-hero h1{ font-weight:400; }
#servicios h2 em, #servicios-hero h1 em, #servicios-hero h1 em{ color:var(--teal); }
#servicios-hero h1 em, #servicios-hero h1 .accent-blue{
  font-style:italic; font-weight:600; color:var(--teal); text-shadow:0 2px 24px rgba(0,0,0,.35);
}
#servicios-hero .lede strong, #servicios-hero .lede strong, footer .foot-brand strong{ color:var(--paper); }
#servicios-hero::after, #servicios-hero::after{ background:linear-gradient(180deg,rgba(0,0,0,.55) 0,rgba(0,0,0,.80) 100%) !important; }
#servicios-hero, #servicios-hero{ background:#000; }
#servicios-hero h1, #servicios-hero h1{ color:#fff; }
#servicios-hero h1 em, #servicios-hero h1 em, #servicios-hero h1 .accent-blue{ color:#ffc200; }
#servicios-hero .lede, #servicios-hero .lede{ color:rgba(255,255,255,.82); }
#servicios-hero .lede strong, #servicios-hero .lede strong{ color:#fff; }
#servicios-hero .back-home, #servicios-hero .back-home{ color:rgba(255,255,255,.85); border-bottom-color:rgba(255,255,255,.35); }
#servicios-hero .back-home:hover, #servicios-hero .back-home:hover{ color:#fff; border-color:#fff; }


/* Indicador de scroll del hero = el mismo de las ventanas del portafolio (icono con punto que baja + rebote) */
.scroll-cue{ bottom:1.4rem; gap:.45rem; color:var(--paper,#F5F4EF); font-size:.72rem; letter-spacing:.03em; pointer-events:none; }
.scroll-cue svg{ display:block; filter:drop-shadow(0 2px 6px rgba(0,0,0,.5)); animation:pfScrollBounce 1.8s ease-in-out infinite; }
.scroll-cue span{ text-shadow:0 2px 6px rgba(0,0,0,.55); }
.scroll-cue .scroll-mouse, .scroll-cue .scroll-chevron{ display:none !important; }
@media (prefers-reduced-motion:reduce){ .scroll-cue svg, .scroll-cue .pf-scroll-dot{ animation:none; } }


/* Paquetes: guía de 5 cajas (la quinta lleva al Mix creativo); sin menú secundario */
.svc-guide-list{ grid-template-columns:repeat(5,minmax(0,1fr)); }
.svc-group, #svc-carta{ scroll-margin-top:104px; }
@media (max-width:1100px){ .svc-guide-list{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:700px){ .svc-guide-list{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:480px){ .svc-guide-list{ grid-template-columns:1fr; } }


/* Paquetes: botón flotante "Volver a las opciones" (aparece al bajar de las cajas, a la izquierda para no chocar con WhatsApp) */
.svc-guide{ scroll-margin-top:84px; }
.svc-top{
  position:fixed; left:1.1rem; bottom:1.1rem; z-index:190;
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.8rem 1.1rem; min-height:44px;
  background:#000; color:#fff; border:1px solid #000; border-radius:0;
  font-size:.85rem; font-weight:600; letter-spacing:.01em; text-decoration:none;
  box-shadow:0 8px 24px rgba(0,0,0,.28);
  opacity:0; visibility:hidden; transform:translateY(12px);
  transition:opacity .3s ease, transform .3s ease, visibility 0s linear .3s, background .2s ease, color .2s ease, border-color .2s ease;
}
.svc-top.is-visible{ opacity:1; visibility:visible; transform:none; transition:opacity .3s ease, transform .3s ease, background .2s ease, color .2s ease, border-color .2s ease; }
.svc-top:hover{ background:#ffc200; border-color:#ffc200; color:#000; }
.svc-top:focus-visible{ outline:2px solid #ffc200; outline-offset:3px; }
.svc-top-ico{ font-size:1rem; line-height:1; }
@media (max-width:620px){ .svc-top{ left:.8rem; bottom:.8rem; padding:.75rem .95rem; } }
@media (prefers-reduced-motion:reduce){ .svc-top{ transition:none; } }


/* =========================================================
   MARCADOR AMARILLO: la firma visual de los menús
   La misma barra que tacha las palabras destacadas de los títulos ("hacemos", "habla")
   marca ahora el elemento activo de los menús. Sin cuadritos, sin subrayados finos.
   ========================================================= */
nav.main-nav a{
  padding:0 .14em 3px; margin:0 -.14em;
  background:linear-gradient(transparent 50%, #ffc200 50%, #ffc200 82%, transparent 82%) no-repeat left / 0 100%;
  transition:color .3s ease, background-size .4s cubic-bezier(.4,0,.2,1);
}
nav.main-nav a::after{ display:none; }
nav.main-nav a:hover, nav.main-nav a[aria-current=page]{ color:#000; background-size:100% 100%; }

/* =========================================================
   PORTAFOLIO COMPLETO: menú lateral de categorías (misma letra que el menú principal)
   ========================================================= */
#portafolio-completo .pf-layout{
  display:grid; grid-template-columns:230px minmax(0,1fr); gap:clamp(2rem,4vw,3.6rem); align-items:start;
}
#portafolio-completo .pf-side{ position:sticky; top:112px; }
#portafolio-completo .pf-side-title{
  margin:0 0 1rem; font-family:var(--f-body); font-size:.72rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:rgba(0,0,0,.6);
}
#portafolio-completo .pf-filters{
  display:flex; flex-direction:column; flex-wrap:nowrap; gap:0; overflow:visible; padding:0; margin:0;
  border-top:1px solid rgba(0,0,0,.14);
}
#portafolio-completo .pf-filter-btn{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  width:100%; min-height:0; padding:.95rem 0 !important; margin:0;
  text-align:left; white-space:normal;
  background:transparent !important; color:var(--ink-soft,#5a5a5a); border:0 !important; border-bottom:1px solid rgba(0,0,0,.14) !important; border-radius:0 !important;
  font-family:var(--f-body); font-size:.95rem; font-weight:500; letter-spacing:0; line-height:1.3;
  transition:color .3s ease;
}
#portafolio-completo .pf-filter-btn .pf-label{
  padding:0 .14em 3px; margin-left:-.14em;
  background:linear-gradient(transparent 50%, #ffc200 50%, #ffc200 82%, transparent 82%) no-repeat left / 0 100%;
  transition:background-size .4s cubic-bezier(.4,0,.2,1);
}
#portafolio-completo .pf-filter-btn:hover{ color:#000; }
#portafolio-completo .pf-filter-btn:hover .pf-label, #portafolio-completo .pf-filter-btn.is-active .pf-label{ background-size:100% 100%; }
#portafolio-completo .pf-filter-btn.is-active{ color:#000; }
#portafolio-completo .pf-filter-btn.is-active .pf-label{ font-weight:600; }
#portafolio-completo .pf-filter-btn:focus-visible{ outline:2px solid #000; outline-offset:2px; }
#portafolio-completo .pf-count{
  flex:none; min-width:1.9rem; padding:.16rem .45rem; text-align:center;
  font-family:var(--f-body); font-size:.72rem; font-weight:600; letter-spacing:.02em; line-height:1.3;
  color:rgba(0,0,0,.55); background:rgba(0,0,0,.06); border-radius:0;
  transition:background .25s ease, color .25s ease;
}
#portafolio-completo .pf-count:empty{ display:none; }
#portafolio-completo .pf-filter-btn.is-active .pf-count{ background:#000; color:#fff; }
#portafolio-completo .pf-filter-btn.is-empty{ opacity:.45; }

/* la cuadrícula es más angosta: 3 columnas en escritorio, 2 en pantallas medianas */
@media (min-width:901px){ #portafolio-completo .portfolio-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (min-width:901px) and (max-width:1100px){ #portafolio-completo .portfolio-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } #portafolio-completo .pf-layout{ grid-template-columns:200px minmax(0,1fr); } }

/* celular y tableta: el menú pasa arriba como una tira deslizable */
@media (max-width:900px){
  #portafolio-completo .pf-layout{ grid-template-columns:1fr; gap:1.4rem; }
  #portafolio-completo .pf-side{ position:static; }
  #portafolio-completo .pf-side-title{ display:none; }
  #portafolio-completo .pf-filters{
    flex-direction:row; gap:.5rem; border-top:0; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding-bottom:.2rem;
  }
  #portafolio-completo .pf-filters::-webkit-scrollbar{ display:none; }
  #portafolio-completo .pf-filter-btn{
    width:auto; flex:none; gap:.55rem; white-space:nowrap; min-height:42px;
    padding:.55rem .95rem !important; font-size:.82rem;
    border:1px solid rgba(0,0,0,.2) !important; color:#000;
  }
  #portafolio-completo .pf-filter-btn .pf-label{ background:none !important; padding:0; margin:0; }
  #portafolio-completo .pf-filter-btn.is-active{ background:#000 !important; border-color:#000 !important; color:#fff; }
  #portafolio-completo .pf-filter-btn.is-active .pf-label{ font-weight:600; }
  #portafolio-completo .pf-filter-btn.is-active .pf-count{ background:#fff; color:#000; }
  #portafolio-completo .pf-count{ font-size:.7rem; }
}

/* Portafolio: que la tira de categorías nunca ensanche la página en celular y tableta */
#portafolio-completo .pf-layout > *{ min-width:0; }
@media (max-width:900px){
  #portafolio-completo .pf-layout{ grid-template-columns:minmax(0,1fr); }
  #portafolio-completo .pf-side, #portafolio-completo .pf-filters{ max-width:100%; }
}


/* =========================================================
   CONTACTO: página propia, y formulario con frase propia en cada página
   ========================================================= */
/* cabecera de Contacto = la de Portafolio */
#contacto-hero{position:relative;background:var(--navy);padding-top:clamp(8rem,14vw,10rem);padding-bottom:clamp(3rem,6vw,4.5rem);overflow:hidden}
#contacto-hero::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,.55) 0,rgba(0,0,0,.78) 100%)}
#contacto-hero .wrap{position:relative;z-index:2}
#contacto-hero .eyebrow{color:var(--gold-soft);margin-bottom:1.2rem}
#contacto-hero .eyebrow .sq-mini span{background:var(--gold)}
#contacto-hero h1{color:var(--paper);font-size:clamp(2.1rem, 4vw, 3.3rem);font-weight:500;max-width:760px}
#contacto-hero .lede{color:rgba(250,247,241,.72);max-width:600px;margin-top:1rem}
#contacto-hero .back-home{display:inline-flex;align-items:center;gap:.5rem;margin-top:2rem;font-size:.85rem;color:rgba(250,247,241,.8);border-bottom:1px solid rgba(250,247,241,.3);padding-bottom:2px;transition:color .3s var(--ease),border-color .3s var(--ease)}
#contacto-hero .back-home:hover{color:var(--paper);border-color:var(--paper)}

/* la frase de al lado del formulario: título con la palabra marcada, como en los títulos del Home */
.contact-section{ border-top:1px solid rgba(0,0,0,.08); }
.contact-info h2{ margin:1rem 0 1.4rem; }
.contact-info .lede{ margin-bottom:2.2rem; }
.contact-info h2 em{
  color:#000 !important; font-style:italic; text-shadow:none !important;
  background:linear-gradient(transparent 62%, #ffc200 62%, #ffc200 94%, transparent 94%);
  padding:0 .1em; -webkit-box-decoration-break:clone; box-decoration-break:clone;
}
/* menú móvil: la página actual en amarillo */
.mobile-nav a[aria-current=page]{ color:#ffc200; }


/* contacto-hero: igual que nosotros-hero */
/* =========================================================
   PÁGINA "NOSOTROS"
   ========================================================= */
/* cabecera oscura (mismas reglas del portafolio completo) */
#contacto-hero{position:relative;background:var(--navy);padding-top:clamp(8rem,14vw,10rem);padding-bottom:clamp(3rem,6vw,4.5rem);overflow:hidden}
#contacto-hero::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,.55) 0,rgba(0,0,0,.78) 100%)}
#contacto-hero .wrap{position:relative;z-index:2}
#contacto-hero .eyebrow{color:var(--gold-soft);margin-bottom:1.2rem}
#contacto-hero .eyebrow .sq-mini span{background:var(--gold)}
#contacto-hero h1{color:var(--paper);font-size:clamp(2.1rem, 4vw, 3.3rem);font-weight:500;max-width:760px}
#contacto-hero .lede{color:rgba(250,247,241,.72);max-width:600px;margin-top:1rem}
#contacto-hero .back-home{display:inline-flex;align-items:center;gap:.5rem;margin-top:2rem;font-size:.85rem;color:rgba(250,247,241,.8);border-bottom:1px solid rgba(250,247,241,.3);padding-bottom:2px;transition:color .3s var(--ease),border-color .3s var(--ease)}
#contacto-hero .back-home:hover{color:var(--paper);border-color:var(--paper)}
#contacto-hero h1{ font-weight:400; }
#contacto-hero h1 em{ color:var(--teal); }
#contacto-hero h1 .accent-blue{
  font-style:italic; font-weight:600; color:var(--teal); text-shadow:0 2px 24px rgba(0,0,0,.35);
}
#contacto-hero .lede strong{ color:var(--paper); }
#contacto-hero::after{ background:linear-gradient(180deg,rgba(0,0,0,.55) 0,rgba(0,0,0,.80) 100%) !important; }
#contacto-hero{ background:#000; }
#contacto-hero h1{ color:#fff; }
#contacto-hero h1 em, #contacto-hero h1 .accent-blue{ color:#ffc200; }
#contacto-hero .lede{ color:rgba(255,255,255,.82); }
#contacto-hero .lede strong{ color:#fff; }
#contacto-hero .back-home{ color:rgba(255,255,255,.85); border-bottom-color:rgba(255,255,255,.35); }
#contacto-hero .back-home:hover{ color:#fff; border-color:#fff; }