@font-face{font-family:"Socake";src:url("../fonts/Socake.otf") format("opentype"),url("../fonts/Socake.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap;}
:root{
  --brand:#00787a;
  --bg:#0b0f10;
  --card:rgba(17,24,25,.75);
  --stroke:rgba(255,255,255,.10);
  --text:#f4f6f6;
  --muted:#b7c0c0;
  --radius:18px;
  --shadow:0 14px 40px rgba(0,0,0,.45);
  --shadow2:0 6px 18px rgba(0,0,0,.35);
  --max:1120px;

  /* Safe area (Instagram / iOS) */
  --sat: env(safe-area-inset-top);
  --sab: env(safe-area-inset-bottom);
}
.topbar{ padding-top: var(--sat); }
body{ padding-bottom: var(--sab); }

/* Un poco más de presencia visual en desktop (NO afecta móvil) */
@media (min-width: 1200px){
  html{ font-size: 17px; }
  .hero{ padding: 30px; }
  .card{ padding: 20px; }
  .tab{ padding: 11px 16px; }
}

*{ box-sizing: border-box; }

html{
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

html,body{
  margin:0;
  padding:0;
  background:var(--bg);
  color:var(--text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;
  overflow-x:hidden;
}

a{ text-decoration:none; color:inherit; }

.container{max-width:var(--max);margin:0 auto;padding:18px 16px}

.topbar{
  position:sticky;
  top:0;
  z-index:20;
  background:rgba(11,15,16,.88);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,255,255,.06);
}

.topbar .row{display:flex;align-items:center;gap:14px}
.brand{display:flex;align-items:center;gap:10px;font-weight:900;letter-spacing:.2px}
.brand-name{font-family:"Socake",system-ui,-apple-system,Segoe UI,Roboto,Arial;font-weight:400;font-size:1.35rem;letter-spacing:0;white-space:nowrap;word-break:normal;overflow-wrap:normal;hyphens:none}

@media (max-width:420px){
  .brand-name{font-size:1.22rem}
}
.brand img{width:44px;height:44px;border-radius:14px;display:block}
.tabs{margin-left:auto;display:flex;gap:10px;flex-wrap:wrap}
.tab{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  padding:10px 14px;border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  color:var(--muted);font-weight:700;
}
.tab.active{border-color:rgba(0,120,122,.85);color:#fff}
.header-actions{display:flex;gap:10px;align-items:center;margin-left:10px}
.icon-btn{
  width:42px;height:42px;border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(17,24,25,.55);
  display:grid;place-items:center;
}
.icon-btn img{width:22px;height:22px;display:block}
/* layout blocks */
.hero{
  border-radius:var(--radius);
  background:radial-gradient(900px 520px at 18% 8%, rgba(0,120,122,.32), transparent 55%),
             linear-gradient(180deg, rgba(17,24,25,.85), rgba(17,24,25,.55));
  border:1px solid rgba(255,255,255,.06);
  box-shadow:var(--shadow);
  padding:26px;
}
.hero-wrap{display:grid;grid-template-columns:1fr auto;gap:18px;align-items:center;position:relative}
.hero h1{margin:0 0 8px;font-size:clamp(2rem,4.6vw,3.1rem);line-height:1.05}
.hero p{margin:0;color:var(--muted);max-width:720px}
.hero-illus img{
  width:clamp(170px,22vw,320px);
  height:auto;display:block;
  filter:drop-shadow(0 14px 26px rgba(0,0,0,.45));
  opacity:.96;
}
@media(max-width:820px){
  .hero-wrap{grid-template-columns:1fr}
  .hero-illus{position:absolute;right:14px;bottom:14px;opacity:.95;pointer-events:none}
  .hero-illus img{width:160px}
  .hero{padding-bottom:140px}

  /* Home (móvil): sin ilustración y con menos aire vertical */
  .page-home .hero-illus{display:none}
  .page-home .hero{padding-bottom:22px}
  .page-home main.container{padding-top:12px}
  .page-home .card{margin-top:12px}
  .page-home .about{gap:12px}
  .page-home .about-media img{max-height:200px}
}
.actions{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:10px;
  margin-top:16px;
}

.actions .btn{
  min-width:0;
}

/* Botón correo: texto corto en móvil */
.btn-label-short{display:none}
@media(max-width:720px){
  .btn-label-long{display:none}
  .btn-label-short{display:inline}
  /* Botones un poco más compactos */
  .page-home .actions .btn{padding:11px 10px}
}
.btn{
  padding:14px 16px;border-radius:16px;
  background:var(--brand);color:#fff;
  font-weight:900;text-align:center;
  border:1px solid rgba(255,255,255,.06);
}
.btn.secondary{background:rgba(17,24,25,.65);color:#fff;border:1px solid rgba(255,255,255,.12)}
.card{
  margin-top:14px;
  background:var(--card);
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius);
  box-shadow:var(--shadow2);
  padding:18px;
}
.card h2{margin:0 0 10px;font-size:1.15rem}

/* Home: compact layout (desktop) */
@media (min-width: 980px){
  .page-home main.container{padding-top:14px;padding-bottom:10px}
  /* Reduce vertical height so Home fits better in one screen at 100% zoom */
  .page-home .hero{padding:18px 20px}
  .page-home .hero-wrap{gap:14px}
  .page-home .hero h1{font-size:2.45rem;line-height:1.04;margin-bottom:.35rem}
  .page-home .hero p{font-size:.98rem}
  .page-home .actions{margin-top:10px;gap:10px}
  .page-home .btn{padding:11px 14px;border-radius:14px}
  .page-home .card{margin-top:10px;padding:14px}
  .page-home .about{gap:12px}
  .page-home .about img{max-height:175px;object-fit:cover}
  .page-home .home-collabs .collab-band{margin-top:10px;padding:14px}
  .page-home footer{margin-top:10px}
}
.grid-2{display:grid;grid-template-columns:1.2fr .8fr;gap:14px;align-items:start}
@media(max-width:920px){.grid-2{grid-template-columns:1fr}}
/* about */
.about{display:grid;grid-template-columns:360px 1fr;gap:16px;align-items:center}
.about img{width:100%;border-radius:18px;display:block;box-shadow:var(--shadow2);border:1px solid rgba(255,255,255,.08)}
@media(max-width:920px){.about{grid-template-columns:1fr}}
.muted{color:var(--muted)}
/* carousel (no overflow outside) */
.carousel{
  display:flex;gap:12px;overflow-x:auto;max-width:100%;
  padding-bottom:6px;scroll-snap-type:x mandatory;
}
.slide{
  scroll-snap-align:start;
  min-width:220px;max-width:240px;
  border-radius:18px;overflow:hidden;
  background:rgba(11,15,16,.6);
  border:1px solid rgba(255,255,255,.08);
}
.slide .ph{aspect-ratio:1/1;background:linear-gradient(180deg, rgba(0,120,122,.22), rgba(0,0,0,.25));}
.slide .meta{padding:12px}
.slide .name{font-weight:900}
.slide .ig{color:var(--muted);font-weight:700}
.right-link{display:flex;justify-content:flex-end;margin-top:10px}
hr.sep{border:none;border-top:1px solid rgba(255,255,255,.08);margin:14px 0}
/* iframe map */
.iframe-wrap{
  width:100%;
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:var(--shadow2);
  background:#000;
}
.iframe-wrap iframe{width:100%;height:min(78vh,780px);height:min(78svh,780px);border:0;display:block}
footer{padding:36px 16px;text-align:center;color:var(--muted)}

.grid-photos{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
@media(max-width:900px){.grid-photos{grid-template-columns:repeat(2,1fr)}}
.photo-1x1{aspect-ratio:1/1;overflow:hidden;border-radius:18px}
.photo-1x1 img{width:100%;height:100%;object-fit:cover;display:block}

/* Ilustración sin fondo (transparente sobre el fondo general) */
.hero-illustration,
.illustration,
.illustration-wrap {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}
.hero-illustration img {
  background: transparent !important;
}


/* FIX FINAL: ilustración del hero sin fondo blanco */
.hero-illustration,
.hero-illustration.card,
.hero-illustration.box {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

.hero-illustration img {
  background: transparent !important;
  display: block;
}


/* FIX: eliminar cualquier fondo blanco en el bloque de la ilustración */
.hero-illustration,
.hero-illustration *,
.hero-right,
.hero-right *,
.hero-art,
.hero-art *,
.illustration-wrap,
.illustration-wrap * {
  background-color: transparent !important;
}

/* Si algún layout usa figure o picture */
.hero-illustration figure,
.hero-illustration picture {
  background: transparent !important;
}

@media(max-width:720px){
  .topbar .row{flex-wrap:wrap}
  .tabs{width:100%;margin-left:0;justify-content:center;flex-wrap:nowrap;gap:8px}
  .tab{padding:8px 10px;font-size:.82rem;white-space:nowrap}
}

/* Marcas: strip de logos */
.logo-strip{
  /* Fondo claro para que el strip se vea blanco también en celular */
  background:rgba(255,255,255,.96);
  border-radius:18px;
  padding:14px 10px;
  overflow:hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}
.logo-track{
  display:flex;
  align-items:center;
  gap:14px;
  width:max-content;
  animation:marquee 22s linear infinite;
}
.logo-strip:hover .logo-track{animation-play-state:paused}
@keyframes marquee{
  from{transform:translateX(0);}
  /* 4 bloques idénticos (25%) para que nunca se vea espacio en blanco */
  to{transform:translateX(-25%);}
}
.logo-chip{
  display:flex;
  align-items:center;
  justify-content:center;
  height:72px;
  min-width:160px;
  padding:10px 14px;
  border-radius:16px;
  background:rgba(255,255,255,.90);
  box-shadow:0 10px 30px rgba(0,0,0,.25);
}
.logo-chip img{
  max-height:54px;
  max-width:150px;
  width:auto;
  height:auto;
  object-fit:contain;
  filter: drop-shadow(0 4px 14px rgba(0,0,0,.18));
}

/* HOME: ajustes solo para celular */
.btn-label-short{display:none}

@media (max-width: 820px){
  body.page-home .hero{padding-bottom:22px;} /* quita el aire extra del hero en móvil */
  body.page-home .hero-illus{display:none;}   /* en móvil no mostramos la ilustración */
  body.page-home .actions .btn{padding:12px 10px;font-size:.92rem}

  /* Botón Correo: texto más corto en móvil */
  body.page-home .btn-label-long{display:none}
  body.page-home .btn-label-short{display:inline}

  /* Sección "Quiénes somos": menos separación */
  body.page-home .card.about{margin-top:12px}
  body.page-home .about{gap:12px}
}
.logo-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  margin-top:14px;
}
.logo-card{
  display:flex;
  flex-direction:column;
  gap:10px;
  align-items:center;
  text-align:center;
  padding:14px;
  border-radius:18px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
}
.logo-card .links{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.logo-card .links a{color:rgba(255,255,255,.9);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.25)}
.logo-card .links a:hover{border-bottom-color:rgba(255,255,255,.6)}
@media(max-width:820px){
  .logo-grid{grid-template-columns:1fr}
  .logo-chip{min-width:120px;height:58px}
  .logo-chip img{max-height:38px;max-width:110px}
}


/* === Parches Coffeedatos (2025-12-18) === */
.brand-name{font-family:"Socake",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; letter-spacing:.2px; white-space:nowrap; word-break:normal; overflow-wrap:normal; hyphens:none;}
/* Header mobile: logo+nombre en 1ª fila, menú completo en 2ª fila (sin scroll) */
@media (max-width: 720px){
  .topbar-inner{flex-wrap:wrap; gap:.55rem;}
  .topbar-brand{order:1;}
  .header-actions{order:2; margin-left:auto;}
  .topbar-nav{order:3; width:100%; justify-content:center; flex-wrap:nowrap; gap:.35rem;}
  .topbar-nav .chip-link{flex:1; text-align:center; padding:.42rem .38rem; font-size:.82rem; white-space:nowrap;}
}
/* Botones de contacto en una sola línea en móvil */
@media (max-width: 720px){
  .hero-actions{grid-template-columns:repeat(3,1fr);}
}
/* Mapa embebido */
.map-frame{width:100%; border-radius:18px; overflow:hidden; border:1px solid rgba(255,255,255,.08); background:rgba(0,0,0,.15); margin-top:1rem;}
.map-frame iframe{width:100%; height:72vh; height:72svh; border:0; display:block;}
@media (max-width: 720px){
  .map-frame iframe{height:76vh; height:76svh;}
}
/* Marcas - franja animada */
.logo-strip{background:rgba(255,255,255,.06); border-radius:18px; padding:.75rem .75rem; margin-top:.85rem; overflow:hidden; border:1px solid rgba(255,255,255,.12);}
.logo-track{display:flex; align-items:center; gap:.75rem; width:max-content; animation:logoMarquee 18s linear infinite;}
.logo-strip:hover .logo-track{animation-play-state:paused;}
@keyframes logoMarquee{0%{transform:translateX(0);}100%{transform:translateX(-50%);}}
.logo-chip{display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.88); border-radius:14px; padding:.55rem .85rem; min-width:160px; height:64px; box-shadow:0 10px 24px rgba(0,0,0,.22); border:1px solid rgba(0,0,0,.06);}
.logo-chip img{max-height:42px; max-width:220px; width:auto; height:auto; object-fit:contain;}
.brand-links{display:flex; align-items:center; justify-content:center; gap:.6rem; margin-top:.75rem; flex-wrap:wrap;}
.brand-links a{color:#d8f3f2; text-decoration:none; border-bottom:1px solid rgba(216,243,242,.35);}
.brand-links a:hover{border-bottom-color:rgba(216,243,242,.9);}
.brand-links .dot{opacity:.55;}
/* Tags */
.soft{border:0; height:1px; background:rgba(255,255,255,.08); margin:1.1rem 0;}
.tag-cloud{display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.65rem;}
.tag{display:inline-flex; align-items:center; padding:.38rem .6rem; border-radius:999px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); color:#e9f7f6; text-decoration:none; font-size:.95rem;}
.tag:hover{background:rgba(255,255,255,.14);}


/* Header actual (brand + tabs) */
@media (max-width: 720px){
  .topbar .row{flex-wrap:wrap; gap:.55rem;}
  .topbar .brand{order:1;}
  .topbar .tabs{order:2; width:100%; display:flex; flex-wrap:nowrap; gap:.35rem; justify-content:space-between;}
  .topbar .tab{flex:1; text-align:center; padding:.42rem .3rem; font-size:.82rem; white-space:nowrap;}
}

@media (max-width: 520px){
  /* Tabs + actions should fit without horizontal scrolling */
  .topbar .row{gap:.45rem;}
  .topbar .tabs{justify-content:space-between; gap:.28rem;}
  .topbar .tab{font-size:.78rem; padding:.40rem .25rem;}
  .topbar .actions{gap:.3rem;}
  .icon-btn{width:38px; height:38px;}
  .icon-btn svg{width:18px; height:18px;}
}


/* ===== Coffeedatos tweaks (2025-12-18) ===== */

/* Quiénes somos: texto más ordenado */
.about-text{
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
  line-height: 1.55;
}

/* Hero arte: que no “coma” pantalla en móvil */
@media (max-width: 640px){
  .hero{
    grid-template-columns: 1fr !important;
  }
  .hero-art{
    max-width: 180px !important;
    justify-self: end !important;
    margin-top: .35rem !important;
  }
  .hero-art img{
    width: 100% !important;
    height: auto !important;
  }
}

/* Header: navegación en una sola línea (sin scroll) en móvil */
@media (max-width: 640px){
  .topbar{
    flex-wrap: wrap !important;
    gap: .6rem !important;
  }
  .nav{
    width: 100% !important;
    display: flex !important;
    justify-content: flex-end !important;
  }
  .nav .pill-row{
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: .5rem !important;
    justify-content: flex-end !important;
  }
  .nav .pill{
    padding: .55rem .75rem !important;
    font-size: .9rem !important;
    white-space: nowrap !important;
  }
}

/* Marcas: franja más limpia (blanca suave) + chips claros */
.logo-strip{
  background: rgba(255,255,255,.07) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
}
.logo-chip{
  background: rgba(255,255,255,.92) !important;
  border: 1px solid rgba(0,0,0,.06) !important;
}
.logo-chip img{
  max-height: 44px !important;
  width: auto !important;
}


/* Header móvil: tabs en una sola línea y si no cabe, bajan debajo del logo pero siempre en 1 línea */
@media (max-width: 640px){
  .topbar .container.row{
    flex-wrap: wrap !important;
    gap: .6rem !important;
  }
  .topbar .brand{
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }
  .topbar .tabs{
    width: 100% !important;
    display: flex !important;
    justify-content: flex-end !important;
    flex-wrap: nowrap !important;
    overflow: hidden !important;
    gap: .45rem !important;
  }
  .topbar .tab{
    font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
    padding: .5rem .7rem !important;
    font-size: .9rem !important;
    white-space: nowrap !important;
  }
}

/* Botones de contacto en una sola línea en móvil */
@media (max-width: 640px){
  .hero-actions{
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: .5rem !important;
  }
  .hero-actions .btn{
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    padding-left: .6rem !important;
    padding-right: .6rem !important;
  }
}

@media (max-width:640px){.hero-art{display:none !important;}}

/* ====== Marcas: banda de colaboraciones (marquee) ====== */
.collab-band{
  display:flex;
  align-items:center;
  gap:1rem;
  padding:.9rem 1rem;
  border-radius:18px;
  background:#ffffff;
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 10px 30px rgba(0,0,0,.18);
  overflow:hidden;
}
.collab-marquee{background:#fff;border-radius:18px;}
.collab-track{background:#fff;}


.collab-label{
  font-weight:900;
  letter-spacing:.2px;
  color:#0b0b0b;
  white-space:nowrap;
}

.collab-marquee{ flex:1; overflow:hidden; }

.collab-track{
  display:flex;
  align-items:center;
  gap:1rem;
  width:max-content;
  will-change:transform;
  animation:collab-scroll 18s linear infinite;
}

/* Pausa al pasar el mouse (desktop) */
@media (hover:hover){
  .collab-marquee:hover .collab-track{ animation-play-state:paused; }
}

@keyframes collab-scroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}

.collab-chip{
  display:flex;
  align-items:center;
  justify-content:center;
  height:64px;
  padding:.45rem 1.1rem;
  border-radius:999px;
  background:rgba(0,0,0,.05);
  border:1px solid rgba(0,0,0,.10);
  flex:0 0 auto;
  text-decoration:none;
  transition:transform .15s ease, box-shadow .15s ease;
}

.collab-chip img{display:block;height:38px;width:auto;max-width:none;}

@media (hover:hover){
  .collab-chip:hover{
    transform:translateY(-1px);
    box-shadow:0 10px 18px rgba(0,0,0,.18);
  }
}

@media (max-width:640px){
  .collab-band{ padding:.75rem .75rem; gap:.75rem; }
  .collab-label{ font-size:.95rem; }
  .collab-chip{ height:64px; padding:.45rem 1rem; }
  .collab-chip img{display:block;height:38px;width:auto;max-width:none;}
}
/* Page title + inline action */
.page-title-row{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:1rem;
  flex-wrap:wrap;
  margin-bottom:1rem;
}
.btn-sm{ padding:.55rem .9rem; font-size:.95rem; }

/* =============================
   Servicios
   ============================= */
.services-block{margin-top:1.25rem;}
.services-title{font-size:2.2rem;margin:.25rem 0 1rem;}
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}

/* Slider horizontal (interactivo) */
.services-slider{
  display:flex;
  gap:14px;
  overflow-x:auto;
  padding:2px 2px 10px;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
}
.services-slider .service-card{
  flex:0 0 360px;
  scroll-snap-align:start;
}
.services-slider::-webkit-scrollbar{ height:10px; }
.services-slider::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.12); border-radius:999px; }
.services-slider::-webkit-scrollbar-track{ background:transparent; }

.service-card{
  position:relative;
  min-height:240px;
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 10px 22px rgba(0,0,0,.25);
  background:
    linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.75));
}

/* Puedes reemplazar estas imágenes más adelante por fotos reales */
.service-1{background:
  linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.80)),
  radial-gradient(circle at 20% 30%, rgba(9,128,129,.55), rgba(0,0,0,.0) 60%),
  radial-gradient(circle at 85% 70%, rgba(255,255,255,.09), rgba(0,0,0,.0) 55%);
}
.service-2{background:
  linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.80)),
  radial-gradient(circle at 40% 40%, rgba(150,110,40,.45), rgba(0,0,0,.0) 62%),
  radial-gradient(circle at 80% 80%, rgba(255,255,255,.08), rgba(0,0,0,.0) 55%);
}
.service-3{background:
  linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.80)),
  radial-gradient(circle at 30% 65%, rgba(255,255,255,.10), rgba(0,0,0,.0) 55%),
  radial-gradient(circle at 75% 35%, rgba(9,128,129,.35), rgba(0,0,0,.0) 60%);
}

.service-content{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:18px 18px 16px;
}

.service-title{font-size:1.35rem;margin:0 0 .35rem;line-height:1.15;}
.service-text{margin:0;opacity:.92;max-width:38ch;text-align:justify;text-justify:inter-word;}
.services-slider .service-text{max-width:none;}

@media (max-width:860px){
  .services-grid{grid-template-columns:1fr;}
  .services-slider .service-card{ flex-basis: 86%; }
  .service-card{min-height:210px;}
}

/* ===== Servicios: WhatsApp al pie de la página ===== */
.services-whatsapp{
  margin-top: 14px;                 /* separa del contenido */
  padding: 18px 16px;
  text-align: center;
  border-top: 1px solid rgba(255,255,255,.08);
  background: rgba(17,24,25,.35);
}

.services-whatsapp p{
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.services-whatsapp a{
  font-weight: 800;
  text-decoration: underline;
}
/* Home: Colaboraciones más compactas (no deben robar protagonismo) */
/* home collabs sizing */
.home-collabs{ padding: 1.25rem 0 1rem; }

.home-collabs h2{ font-size: 1.05rem; margin: 0 0 .6rem; }
.home-collabs .collab-band{ padding: .4rem .5rem; border-radius: 1rem; }
.home-collabs .collab-viewport{ min-height: 50px; padding: .2rem; }
.home-collabs .collab-track{ gap: .55rem; }
.home-collabs .collab-chip{ min-height: 44px; min-width: 140px; padding: .2rem .6rem; }
.home-collabs .collab-chip img{ max-height: 32px; }
.home-collabs .collab-chip img[alt*="blemd" i]{ max-height: 28px; }

.collab-track{display:flex;width:max-content;}
.collab-set{display:flex;align-items:center;gap:1rem;}

/* COMMUNITY YEAR GALLERY */
.gallery-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:.75rem}
.year-switch{display:flex;gap:.5rem}
.year-btn{border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.04);color:#fff;padding:.45rem .75rem;border-radius:999px;font-weight:800;cursor:pointer}
.year-btn.is-active{border-color:rgba(9,128,129,.75);box-shadow:0 0 0 2px rgba(9,128,129,.18) inset}
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:.75rem}
.gallery-item{position:relative;border-radius:18px;overflow:hidden;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}
.gallery-item img{width:100%;height:100%;aspect-ratio:1/1;object-fit:contain;display:block;background:rgba(0,0,0,.25)}
.gallery-cap{position:absolute;right:.5rem;bottom:.5rem;padding:.35rem .45rem;background:rgba(0,0,0,.55);border-radius:10px;font-size:.8rem;line-height:1.15;text-align:right;max-width:90%}
.gallery-cap .name{font-weight:900;display:block}
.gallery-cap .ig{opacity:.9}
.gallery-empty{margin-top:.75rem;opacity:.8}

/* HOME HERO MOBILE TWEAKS */
@media (max-width:720px){
  .hero{padding:1rem}
  .hero-art{display:none !important;} /* hide brew illustration */
  .btn-row{gap:.55rem}
  .btn{padding:.75rem .9rem}
}

.collab-chip img[alt="blemd"]{height:38px !important;}


/* === Gallery preview slider (Comunidad) === */
.gallery-slider{padding:.25rem 0 .2rem}
.gallery-slider .gallery-rail{display:flex;gap:1rem;overflow-x:auto;padding:.4rem .2rem}
.gallery-slider .gallery-slide{flex:0 0 260px;text-decoration:none;color:inherit}
.gallery-slider .gallery-media{
  border-radius:14px;
  overflow:hidden;
  aspect-ratio:1/1;
  background:#0b0f10;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
}
.gallery-slider .gallery-media img{width:100%;height:100%;object-fit:contain;display:block}
.gallery-slider .gallery-caption{
  position:absolute;
  right:.55rem;
  bottom:.55rem;
  background:rgba(0,0,0,.55);
  padding:.35rem .5rem;
  border-radius:12px;
  font-size:.85rem;
  line-height:1.15;
  text-align:right;
  max-width:90%;
  backdrop-filter:blur(6px);
}
@media (max-width:520px){
  .gallery-slider .gallery-slide{flex-basis:78vw}
}

/* === Home collaborations band (logos only) === */
.home-collabs{ padding:.75rem 0 .5rem; }
.home-collabs .collab-band{
  background:#fff;
  border-radius:16px;
  padding:.25rem .35rem; /* narrower */
}
.home-collabs .collab-viewport{ overflow:hidden; }
.home-collabs .collab-track{ display:flex; width:max-content; gap:.75rem; animation:collab-scroll 18s linear infinite; }
.home-collabs .collab-set{ display:flex; align-items:center; gap:.75rem; }
.home-collabs .collab-pill{
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  border-radius:14px;
  padding:.35rem .85rem;
  min-height:44px;
  min-width:140px;
  box-shadow:0 8px 18px rgba(0,0,0,.08);
}
.home-collabs .collab-pill img{ display:block; height:30px; width:auto; max-width:none; }
.home-collabs .collab-pill img.blemd{ height:32px; }
.home-collabs .collab-pill img.logo-abogada{ filter: brightness(0) saturate(100%); }
@media (max-width:520px){
  .home-collabs .collab-pill{ min-width:120px; padding:.3rem .7rem; }
  .home-collabs .collab-pill img{ height:28px; }
  .home-collabs .collab-pill img.blemd{ height:24px; }
}

/* Gallery year tabs + more link */
.year-tabs{display:flex;gap:.45rem;align-items:center}
.year-tab{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);color:#e9f6f6;padding:.35rem .7rem;border-radius:999px;font-weight:700;cursor:pointer}
.year-tab.active{background:rgba(9,128,129,.18);border-color:rgba(9,128,129,.55)}
.more-row{display:flex;justify-content:flex-end;margin-top:.35rem}
/* Logos tweaks */
.collab-chip img[src$="abogada.png"], .collab-chip img[alt="La Abogada del Café"]{filter:brightness(0) saturate(100%);}

/* Ocultar ilustración del hero SOLO en mobile */
@media (max-width: 768px){
  .hero-illus{ display:none !important; }
}
/* ===== Servicios: layout (slice en móvil / grilla en desktop) ===== */

/* IMPORTANTE:
   Para que esto aplique, agrega la clase "page-servicios" en el HTML:
   <main class="page page-servicios"> ... </main>
   (o en el body: <body class="page-servicios">)
*/

/* Servicios: mismo ancho que Inicio/Comunidad (usa --max) */
.page-servicios{
  max-width: var(--max);
  margin: 0 auto;
  padding-left: 16px;
  padding-right: 16px;
}

/* Cards dentro de Servicios: aire parejo, sin “agrandar” raro */
.page-servicios .card{
  padding: 18px;
}

/* Contenedor de los servicios */
.page-servicios .services-slice{
  margin-top: 4px;
}

/* MÓVIL/TABLET: carrusel horizontal */
.services-slice{
  display:flex;
  gap:14px;
  overflow-x:auto;
  padding: 6px 2px 10px;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox */
}
.services-slice::-webkit-scrollbar{ display:none; } /* Chrome/Safari */

.services-slice .service-card{
  flex: 0 0 82%;
  max-width: 520px;
  scroll-snap-align: start;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  padding: 14px 14px;
  box-shadow: 0 10px 24px rgba(0,0,0,.12);
}

.services-slice .service-card h3{
  margin: 0 0 6px 0;
  font-size: 1.05rem;
  line-height: 1.2;
}

.services-slice .service-card p{
  margin: 0;
  opacity: .92;
}

.slice-hint{
  margin: 10px 0 0;
  font-size: .92rem;
  opacity: .7;
}

/* DESKTOP: grilla de 3 (igual que el formato de Inicio) */
@media (min-width: 980px){
  .services-slice{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    overflow: visible;
    padding: 0;
    scroll-snap-type: none;
  }
  .services-slice .service-card{
    flex: initial;
    max-width: none;
    min-height: 200px;
  }
  .slice-hint{ display:none; }
}

@media (min-width: 980px) {
  .comu-two{
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 16px;
    align-items: start;
  }
}

/* Años: estilo secundario (no compite con CTA principal) */
.btn.year{
  background: rgba(0, 128, 120, .18);   /* verde suave */
  border: 1px solid rgba(0, 128, 120, .45);
  color: #e9fdfb;
  box-shadow: none;
}

.btn.year:hover{
  background: rgba(0, 128, 120, .28);
}

/* Un poco más “chip” */
#yearsActions .btn.year{
  padding: 12px 14px;
  border-radius: 14px;
  font-weight: 700;
}
/* ===============================
   REVISTA – PERFILES DEL CAFÉ
================================ */

.mag{
  max-width: 1200px;
  margin: 0 auto;
  padding: 22px 0 56px;
}

/* “Página” blanca sobre fondo oscuro */
.mag-page{
  background: #fff;
  color: #111;
  border-radius: 22px;
  padding: 36px;
  box-shadow: 0 20px 70px rgba(0,0,0,.35);
  border: 1px solid rgba(0,0,0,.06);
}

/* Cabecera tipo revista (kicker izq / sección der) */
.mag-topline{
  display:flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 18px;
}

.mag-kicker{
  font-size: .82rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 700;
  color: rgba(0,0,0,.65);
}

.mag-section{
  font-size: .82rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 700;
  color: rgba(0,0,0,.65);
}

/* Hero: foto izquierda + texto derecha + instagram bajo la foto */
.mag-hero{
  display: grid;
  grid-template-columns: 1fr 1fr;   /* 👈 IGUAL que mag-wide */
  grid-template-rows: auto auto;
  column-gap: 26px;                 /* mismo gap editorial */
  row-gap: 34px;
  align-items: start;
}

/* Columna izquierda: foto */
.mag-photo{
  grid-column: 1;
  grid-row: 1;
  border-radius: 18px;
  overflow: hidden;
  background: #eee;
  padding: 12px;
  box-sizing: border-box;

}

/* Imagen dentro de la foto */
.mag-photo img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: 14px;        /* redondeo interno */
}

/* ✅ Control de foto por dispositivo */
.mag-photo--m{ display: none; }  /* desktop: no mostrar foto mobile */

/* ✅ Pantalla chica (incluye ventana minimizada): usar “modo celular” */
@media (max-width: 1100px){
  .mag-photo--d{ display: none; }
  .mag-photo--m{ display: block; }
}

/* Para que la foto se sienta “de portada” */
.mag-photo.mag-tall{
  aspect-ratio: 3 / 4;
}

/* Columna derecha: texto (queda fijo, no se mueve) */
.mag-hero > div{
  grid-column: 2;
  grid-row: 1 / span 2;
}

/* Instagram: columna izquierda, debajo de la foto */
.mag-hero .mag-ad.ig{
  grid-column: 1;
  grid-row: 2;
  margin-top: 14px;

  /* ✅ mismo ancho visual que la foto */
  width: calc(100% - 24px);     /* 12px + 12px (padding de .mag-photo) */
  justify-self: center;         /* lo centra dentro de la columna */
}


/* Titular grande + bajada */
.mag-title{
  font-size: clamp(2rem, 3.2vw, 3.2rem);
  line-height: 1.05;
  margin: 0 0 10px;
  font-weight: 800;
}

.mag-dek{
  margin: 0 0 18px;
  color: rgba(0,0,0,.78);
  font-size: 1.02rem;
  line-height: 1.6;
}

/* Línea de créditos finita */
.mag-credits{
  font-size: .82rem;
  color: rgba(0,0,0,.6);
  border-top: 1px solid rgba(0,0,0,.12);
  padding-top: 10px;
  margin-top: 12px;
}

/* Cuerpo en columnas (revista) */
.mag-body{
  margin-top: 20px;
}

.mag-columns{
  column-count: 2;
  column-gap: 34px;
  font-size: 1rem;
  line-height: 1.75;
  color: rgba(0,0,0,.88);
  text-align: justify;          /* 👈 JUSTIFICADO */
  text-justify: inter-word;     /* 👈 espaciado elegante */
}

.mag-columns p{
  margin: 0 0 14px;
}

/* Pregunta / destacador en color (tipo entrevista) */
.mag-q{
  color: var(--brand);
  font-weight: 700;
  font-style: italic;
  break-inside: avoid;
}

/* Pull quote */
.mag-pull{
  margin: 18px 0 4px;
  padding: 18px 18px 18px 16px;
  border-left: 4px solid var(--brand);
  background: rgba(0,0,0,.03);
  border-radius: 12px;
  break-inside: avoid;
}

.mag-pull p{
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.6;
  font-style: italic;
  color: rgba(0,0,0,.82);
}

/* Publicidad estilo revista */
.mag-ad{
  margin: 16px 0 4px;
  padding: 16px;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 14px;
  background: rgba(0,0,0,.02);
  break-inside: avoid;
}
/* ✅ Instagram: versión por dispositivo */
.ig--m{ display: none; }   /* desktop: no mostrar IG mobile */

/* ✅ Pantalla chica (incluye ventana minimizada): usar “modo celular” */
@media (max-width: 1100px){
  .ig--d{ display: none; } /* esconder IG del hero */
  .ig--m{ display: block; }/* mostrar IG antes de la nota */
}


/* Instagram: ajustes finos */
.mag-ad.ig{
  margin-top: 18px;
  padding: 16px;      /* 👈 mismo padding en ambos lados */
  text-align: left;   /* correcto para este tipo de bloque */
}

.mag-ad .tag{
  display:inline-block;
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 800;
  color: rgba(0,0,0,.55);
  margin-bottom: 10px;
}

.mag-ad h3{
  margin: 0 0 8px;
  font-size: 1.05rem;
}

.mag-ad p{
  margin: 0 0 12px;
  color: rgba(0,0,0,.75);
  line-height: 1.55;
}

.mag-ad .cta{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 10px 14px;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  font-weight: 800;
  text-decoration:none;
}

/* Separador + segunda foto a lo revista */
.mag-divider{
  height: 1px;
  background: rgba(0,0,0,.12);
  margin: 26px 0;
}

.mag-wide{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;          /* 👈 MISMO gap que el hero */
  align-items: start;
}

.mag-caption{
  margin-top: 10px;
  padding-left: 2px;          /* 👈 evita “corte” visual */
  font-size: .9rem;
  color: rgba(0,0,0,.65);
}


/* Nota editorial Coffeedatos (en página blanca) */
.mag-note{
  margin-top: 26px;
  padding: 18px;
  border-radius: 14px;
  background: rgba(0,0,0,.03);
  border-left: 4px solid var(--brand);
}

.mag-note h3{
  margin: 0 0 8px;
}

.mag-note p{
  margin: 0;
  line-height: 1.65;
  color: rgba(0,0,0,.82);
  text-align: justify;
  text-justify: inter-word;
}

/* 🖥️ Desktop minimizado (NO móvil) */
@media (max-width: 1100px) and (min-width: 769px){
  .mag-photo{
    max-width: 520px;   /* puedes probar 480–560 */
    margin: 0 auto;     /* centra la foto */
  }
}

/* Responsive: desktop chico = layout móvil */
@media (max-width: 1100px){
  .mag-page{
    padding: 22px;
  }

  .mag-hero{
    grid-template-columns: 1fr;
  }

  /* FOTO: no recortar en pantallas chicas */
  .mag-photo.mag-tall{
    aspect-ratio: auto;
  }

  .mag-photo img{
    object-fit: contain;
    background: #f2f2f2;
  }

  /* TEXTO */
  .mag-columns{
    column-count: 1;
    text-align: justify;
    text-justify: inter-word;
  }

  .mag-wide{
    grid-template-columns: 1fr;
  }
}

/* 📱 MOBILE: ajustes finos (sin cambiar a flex) */
@media (max-width: 1100px){
  .mag-hero{ row-gap: 20px; }
  .mag-hero .mag-ad.ig{
    width: 100%;
    justify-self: stretch;
    margin-top: 14px;
  }
}

/* ===============================
   ENTREVISTA DESTACADA – ancho ajustado
================================ */

/* Contenedor de la entrevista destacada */
.featured-interview{
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 560px;      /* 👈 ajusta aquí si quieres (520–620) */
  width: auto;
}
@media (max-width: 420px){
  .actions{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width: 320px){
  .actions{ grid-template-columns:1fr; }
}
/* FIX Instagram WebView: evitar problemas de altura en Home */
body.page-home .hero{
  min-height: auto !important;
  height: auto !important;
}

/* ===============================
   Instagram WebView – igualar escala al navegador
   =============================== */

.ig-webview{
  font-size: 14.5px;              /* si lo ves muy chico, puedes subir a 15px */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
/* ===============================
   Botones solo visibles en móvil
   =============================== */

.mobile-only{
  display: none;
}

@media (max-width: 820px){
  .mobile-only{
    display: flex;
    width: 100%;
    justify-content: center;
  }
}

/* ===============================
   Inicio (Home): en móvil ocultar botones específicos
   =============================== */

@media (max-width: 820px){

  /* (si ya no usas Instagram aquí, incluso este podría irse) */
  body.page-home .hero .actions a[href*="instagram.com"]{
    display:none;
  }
}

/* Home (móvil): ocultar SOLO botón Colaborar */
@media (max-width: 820px){
  body.page-home .hero .actions .desktop-only{
    display: none;
  }
}

/* ===============================
   Grilla de botones en móvil
   =============================== */

@media (max-width: 820px){
  .actions{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-items: stretch;
  }
}

@media (max-width: 820px){
  .actions .btn{
    width: 100%;
  }
}

@media (max-width: 820px){
  .comu-two > .card.desktop-only{
    display: none;
  }
}