/* Noema — estilos compartidos de las páginas del sitio */
  html { scroll-behavior: smooth; scroll-padding-top: 80px; }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
  section[id] { scroll-margin-top: 80px; }

  /* ---------- Barra superior ---------- */
  .barra { position: sticky; top: 0; z-index: 20; background: rgba(255,253,247,.9); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
  .barra::after { content: ""; position: absolute; inset: auto 0 0; height: 1px; background: rgba(30,30,30,.08); opacity: 0; transition: opacity 200ms ease; }
  .barra[data-scrolled="true"]::after { opacity: 1; }
  .menu-panel {
    position: absolute; top: calc(100% + 6px); right: var(--gutter); left: var(--gutter);
    background: var(--blanco); border-radius: 28px; padding: 10px;
    box-shadow: 0 1px 0 rgba(30,30,30,.06), 0 24px 48px -20px rgba(21,100,116,.35);
    display: grid; gap: 2px;
    transform-origin: top right;
    opacity: 0; transform: scale(.96) translateY(-6px); visibility: hidden;
    transition: opacity 180ms var(--ease-out), transform 220ms var(--ease-out), visibility 0s linear 220ms;
  }
  .menu-panel[data-open="true"] { opacity: 1; transform: none; visibility: visible; transition: opacity 180ms var(--ease-out), transform 220ms var(--ease-out); }
  .menu-panel a { padding: 14px 18px; border-radius: 18px; text-decoration: none; font: 400 1.125rem/1.2 var(--f-titulo); }
  .menu-panel a:active { background: var(--niebla); }
  @media (min-width: 1024px) { .menu-panel { display: none; } }

  /* ---------- Bloques comunes ---------- */
  .bloque { padding-block: 72px; }
  @media (min-width: 1024px) { .bloque { padding-block: 120px; } }
  .intro { display: grid; gap: 16px; margin-bottom: 36px; }
  .dos-col .intro { margin-bottom: 0; }
  .intro .lead { max-width: 52ch; }
  .dos-col { display: grid; gap: 36px; }
  @media (min-width: 1024px) { .dos-col { grid-template-columns: 5fr 7fr; gap: 72px; align-items: start; } .dos-col .intro { margin: 0; position: sticky; top: 120px; } }
  .punto { width: 18px; height: 18px; border-radius: 50%; flex: none; background: radial-gradient(circle, currentColor 0 3px, transparent 3.5px), radial-gradient(circle, transparent 0 5px, currentColor 5.5px 9px, transparent 9.5px); }

  /* ---------- Hero (A) ---------- */
  .hero { position: relative; overflow: hidden; }
  .hero-grid { display: grid; }
  .stage { position: relative; height: clamp(260px, 36vh, 320px); margin: 0 calc(var(--gutter) * -1); }
  .stage canvas { width: 100%; height: 100%; cursor: pointer; touch-action: pan-y; }
  .hero .copy { display: grid; gap: 18px; padding: 8px 0 56px; position: relative; z-index: 1; }
  .hero .display { max-width: 11ch; }
  .ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
  .ctas .btn { flex: 1 1 100%; }
  .nota { font-size: .875rem; color: var(--petroleo); margin: 4px 0 0; }
  @media (min-width: 560px) { .ctas .btn { flex: 0 0 auto; } }
  @media (min-width: 1024px) {
    .hero { min-height: min(calc(100vh - 88px), 820px); }
    .hero-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); align-items: center; min-height: min(calc(100vh - 88px), 820px); }
    .hero .copy { padding: 0 0 48px; gap: 24px; }
    .stage { position: absolute; inset: 0 0 0 40%; height: auto; margin: 0; }
  }

  /* ---------- Para quién ---------- */
  .senales { list-style: none; margin: 0; padding: 0; display: grid; }
  .senales li { display: flex; gap: 16px; align-items: flex-start; padding: 20px 0; border-top: 1.5px solid rgba(30,30,30,.1); font: 400 clamp(1.125rem, 1vw + 0.9rem, 1.375rem)/1.35 var(--f-titulo); letter-spacing: -0.01em; }
  .senales li:last-child { border-bottom: 1.5px solid rgba(30,30,30,.1); }
  .senales .punto { color: var(--naranjo); margin-top: 3px; }

  /* ---------- Servicios (carpetas) ---------- */
  .servicios { background: var(--niebla); border-radius: 40px 40px 0 0; }
  .carpetas { display: grid; position: relative; --tab-h: 54px; }
  .carpeta { grid-area: 1 / 1; position: relative; padding: calc(var(--tab-h) + 26px) 24px 28px; color: var(--tinta); transition: transform 380ms var(--ease-out), filter 380ms var(--ease-out); pointer-events: none; }
  @media (min-width: 768px) { .carpeta { padding: calc(var(--tab-h) + 36px) 40px 40px; } }
  .carpeta .pestana, .carpeta[data-activa="true"] .contenido { pointer-events: auto; }
  .carpeta svg.forma { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; z-index: -1; }
  .carpeta[data-activa="false"] { transform: translateY(-12px) scale(.975); filter: saturate(.75) brightness(.97); z-index: 0; }
  .carpeta[data-activa="true"] { z-index: 1; }
  .carpeta[data-activa="false"] .contenido { opacity: 0; visibility: hidden; }
  .contenido { transition: opacity 260ms ease 80ms; display: grid; gap: 16px; }
  .pestana { position: absolute; top: 0; height: var(--tab-h); display: flex; align-items: center; padding: 0 26px; background: none; border: 0; cursor: pointer; color: var(--tinta); font: 400 1.0625rem/1.15 var(--f-titulo); text-align: left; transition: transform 160ms var(--ease-out), opacity 200ms ease; }
  .pestana:active { transform: scale(.97); }
  .carpeta[data-activa="false"] .pestana { opacity: .78; }
  .carpeta h3 { font: 400 clamp(1.625rem, 2vw + 1rem, 2.25rem)/1.05 var(--f-titulo); letter-spacing: -0.02em; margin: 0; }
  .carpeta p { margin: 0; max-width: 42ch; }
  .carpeta ul { list-style: none; padding: 0; margin: 4px 0 0; display: grid; }
  .carpeta li { display: grid; grid-template-columns: 18px 1fr; gap: 14px; padding: 14px 0; border-top: 1.5px solid rgba(30,30,30,.14); }
  .carpeta li .punto { margin-top: 2px; }
  .carpeta li b { font: 400 1.125rem/1.25 var(--f-titulo); display: block; margin-bottom: 2px; }
  .carpeta li span { font-size: .9375rem; line-height: 1.55; }
  .ver { justify-self: start; margin-top: 6px; }

  /* ---------- Cómo trabajamos ---------- */
  .pasos { list-style: none; margin: 0; padding: 0; display: grid; position: relative; counter-reset: paso; }
  .pasos li { position: relative; display: grid; grid-template-columns: 44px 1fr; gap: 6px 18px; padding-bottom: 32px; counter-increment: paso; align-content: start; }
  .pasos li::before { content: counter(paso); grid-row: span 2; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--blanco); box-shadow: inset 0 0 0 2px var(--cian); font: 400 1.125rem/1 var(--f-titulo); color: var(--petroleo); position: relative; z-index: 1; }
  .pasos li::after { content: ""; position: absolute; left: 21px; top: 44px; bottom: 0; width: 2px; background: repeating-linear-gradient(to bottom, var(--cian) 0 3px, transparent 3px 9px); }
  .pasos li:last-child::after { display: none; }
  .pasos h3 { font: 400 1.375rem/1.2 var(--f-titulo); margin: 8px 0 0; letter-spacing: -0.01em; }
  .pasos p { margin: 0; max-width: 40ch; font-size: .975rem; line-height: 1.65; }
  @media (min-width: 1024px) {
    .pasos { grid-template-columns: repeat(4, 1fr); gap: 32px; }
    .pasos li { grid-template-columns: 1fr; padding: 0; }
    .pasos li::before { grid-row: auto; margin-bottom: 12px; }
    .pasos li::after { left: 52px; right: -24px; top: 21px; bottom: auto; width: auto; height: 2px; background: repeating-linear-gradient(to right, var(--cian) 0 3px, transparent 3px 9px); }
  }

  /* ---------- Formas de trabajar ---------- */
  .modalidades { display: grid; gap: 12px; }
  @media (min-width: 768px) { .modalidades { grid-template-columns: 1fr 1fr; } }
  .modalidad { border-radius: 32px; padding: 28px 24px; display: grid; gap: 10px; align-content: start; }
  .modalidad h3 { font: 400 1.5rem/1.15 var(--f-titulo); margin: 0; letter-spacing: -0.01em; }
  .modalidad p { margin: 0; }
  .modalidad--proyecto { background: var(--blanco); box-shadow: inset 0 0 0 1.5px rgba(30,30,30,.1); }
  .modalidad--mensual { background: var(--blanco); box-shadow: inset 0 0 0 1.5px rgba(30,30,30,.1); }
  .simbolo { width: 64px; height: 40px; margin-bottom: 6px; }
  .precio-nota { margin: 20px 0 0; max-width: 60ch; display: flex; gap: 14px; align-items: flex-start; }
  .precio-nota .punto { color: var(--petroleo); margin-top: 4px; }

  /* ---------- Valores (petróleo) ---------- */
  .valores { background: var(--petroleo); color: var(--blanco); }
  .valores .h2 { color: var(--blanco); max-width: 20ch; }
  .valores ul { list-style: none; margin: 40px 0 0; padding: 0; display: grid; gap: 32px; }
  @media (min-width: 900px) { .valores ul { grid-template-columns: repeat(3, 1fr); gap: 48px; } }
  .valores li b { display: block; font: 400 clamp(1.75rem, 2vw + 1rem, 2.5rem)/1.05 var(--f-titulo); letter-spacing: -0.02em; color: var(--amarillo); margin-bottom: 12px; }
  .valores li p { margin: 0; color: rgba(255,255,255,.88); max-width: 34ch; }

  /* ---------- Todo Chile ---------- */
  .alcance-grid { display: grid; gap: 32px; align-items: center; }
  @media (min-width: 1024px) { .alcance-grid { grid-template-columns: 5fr 6fr; gap: 64px; } }
  .alcance-grid > * { min-width: 0; }
  .red svg { width: 100%; height: auto; max-width: 560px; margin-inline: auto; display: block; overflow: visible; }
  .red .linea { fill: none; stroke: var(--petroleo); stroke-opacity: .35; stroke-width: 1.5; stroke-dasharray: 2 7; stroke-linecap: round; }
  .red .viaje { fill: var(--amarillo); }
  @media (prefers-reduced-motion: reduce) { .red .viaje { display: none; } }

  /* ---------- Equipo ---------- */
  .equipo { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
  @media (min-width: 640px) { .equipo { grid-template-columns: repeat(3, 1fr); } }
  .persona { display: grid; grid-template-columns: 88px 1fr; column-gap: 18px; row-gap: 2px; align-items: center; }
  .persona .foto { grid-row: span 2; width: 88px; margin: 0; padding: 5px; }
  .persona b { align-self: end; }
  .persona span.cargo { align-self: start; }
  @media (min-width: 640px) {
    .persona { grid-template-columns: 1fr; justify-items: start; row-gap: 4px; }
    .persona .foto { grid-row: auto; width: 112px; padding: 6px; margin-bottom: 14px; }
  }
  .foto { width: 112px; aspect-ratio: 1; border-radius: 50%; padding: 6px; background: var(--gradiente); margin-bottom: 14px; }
  .foto img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; background: var(--niebla); outline: 4px solid var(--papel); outline-offset: -4px; }
  .persona b { font: 400 1.25rem/1.2 var(--f-titulo); }
  .persona span.cargo { font-size: .9375rem; color: var(--petroleo); }

  /* ---------- Preguntas ---------- */
  .faq { display: grid; }
  .faq details { border-top: 1.5px solid rgba(30,30,30,.12); }
  .faq details:last-child { border-bottom: 1.5px solid rgba(30,30,30,.12); }
  .faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 20px 0; font: 400 1.1875rem/1.3 var(--f-titulo); letter-spacing: -0.01em; }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary i { width: 32px; height: 32px; border-radius: 50%; flex: none; background: var(--niebla); position: relative; transition: transform 220ms var(--ease-out), background-color 200ms ease; }
  .faq summary i::before, .faq summary i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; background: var(--tinta); translate: -50% -50%; border-radius: 2px; }
  .faq summary i::after { rotate: 90deg; transition: rotate 220ms var(--ease-out); }
  .faq details[open] summary i { background: var(--amarillo); }
  .faq details[open] summary i::after { rotate: 0deg; }
  .faq .respuesta { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 260ms var(--ease-out); }
  .faq details[open] .respuesta { grid-template-rows: 1fr; }
  .faq .respuesta > div { overflow: hidden; }
  .faq .respuesta p { margin: 0 0 22px; max-width: 58ch; }

  /* ---------- Contacto ---------- */
  .contacto { background: var(--amarillo); border-radius: 40px 40px 0 0; }
  .contacto-grid { display: grid; gap: 40px; }
  @media (min-width: 1024px) {
    .contacto-grid { grid-template-columns: 5fr 6fr; column-gap: 72px; row-gap: 24px; grid-template-rows: auto 1fr; }
    .contacto-grid > .intro { grid-column: 1; grid-row: 1; }
    .contacto-grid > .canal-texto { grid-column: 1; grid-row: 2; align-self: start; margin-top: 0; }
    .contacto-grid > .contacto-panel { grid-column: 2; grid-row: 1 / span 2; }
  }
  .contacto .h2 { max-width: 14ch; }
  .btn--negro { background: var(--tinta); color: var(--blanco); }
  @media (hover: hover) and (pointer: fine) { .btn--negro:hover { background: #333; } }
  .canal-texto { display: grid; gap: 4px; margin-top: 12px; font-size: .9375rem; }
  .canal-texto a { text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
  .contacto-panel { background: var(--blanco); border-radius: 32px; padding: 24px; display: grid; gap: 14px; align-content: start; }
  @media (min-width: 768px) { .contacto-panel { padding: 32px; } }
  .contacto-panel h3 { font: 400 1.375rem/1.2 var(--f-titulo); letter-spacing: -0.01em; margin: 0 0 4px; }
  .temas { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
  .tema {
    display: grid; grid-template-columns: 18px 1fr 40px; gap: 14px; align-items: center;
    padding: 16px 16px 16px 18px; border-radius: 22px; text-decoration: none;
    background: var(--papel); box-shadow: inset 0 0 0 1.5px rgba(30,30,30,.1);
    transition: transform 160ms var(--ease-out), box-shadow 200ms ease, background-color 200ms ease;
  }
  .tema:active { transform: scale(.98); }
  @media (hover: hover) and (pointer: fine) { .tema:hover { box-shadow: inset 0 0 0 1.5px var(--tinta); } .tema:hover .tema-wa { background: var(--c); } }
  .tema-punto { width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle, var(--c) 0 3px, transparent 3.5px), radial-gradient(circle, transparent 0 5px, var(--c) 5.5px 9px, transparent 9.5px); }
  .tema-texto { display: grid; gap: 2px; min-width: 0; }
  .tema-texto b { font: 400 1.125rem/1.25 var(--f-titulo); }
  .tema-texto span { font-size: .875rem; line-height: 1.45; color: var(--petroleo); }
  .tema-wa { width: 40px; height: 40px; padding: 9px; border-radius: 50%; background: var(--niebla); color: var(--tinta); transition: background-color 200ms ease; }
  .temas-nota { margin: 0; font-size: .8125rem; color: var(--petroleo); }
  .agenda { display: grid; gap: 10px; justify-items: start; margin-top: 10px; padding-top: 20px; border-top: 1.5px dashed rgba(21,100,116,.25); }
  .agenda-titulo { margin: 0; font: 400 1.125rem/1.2 var(--f-titulo); }
  .agenda-nota { margin: 0; font-size: .875rem; line-height: 1.55; }

  /* ---------- Pie ---------- */
  .pie { background: var(--petroleo); color: var(--blanco); padding: 56px 0 24px; overflow: hidden; }
  .pie-grid { display: grid; gap: 28px; font-size: .9375rem; }
  @media (min-width: 768px) { .pie-grid { grid-template-columns: repeat(3, 1fr); } }
  .pie a { color: #fff; text-decoration: none; }
  .pie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
  .pie b { font: 400 1rem/1.2 var(--f-titulo); display: block; margin-bottom: 10px; color: var(--amarillo); }
  .pie .pie-logo { display: block; height: 28px; margin-bottom: 32px; }
  .pie small { display: block; margin-top: 20px; opacity: .7; font-size: .8125rem; }

  /* ---------- WhatsApp flotante (solo celular) ---------- */
  .wa-flotante {
    position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 30;
    width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
    background: var(--amarillo); color: var(--tinta);
    box-shadow: 0 10px 30px -10px rgba(21,100,116,.55);
    opacity: 0; transform: translateY(12px) scale(.9); pointer-events: none;
    transition: opacity 220ms var(--ease-out), transform 260ms var(--ease-out);
  }
  .wa-flotante svg { width: 26px; height: 26px; }
  .wa-flotante[data-visible="true"] { opacity: 1; transform: none; pointer-events: auto; }
  .wa-flotante:active { transform: scale(.94); }
  @media (min-width: 1024px) { .wa-flotante { display: none; } }

  /* =========================================================
     Páginas de servicio (Marketing / Tecnología)
     ========================================================= */
  .migas { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; list-style: none; margin: 0; padding: 8px 0 20px; font-size: .875rem; color: var(--petroleo); }
  .migas li + li::before { content: "/"; margin-right: 8px; opacity: .5; }
  .migas a { text-decoration-thickness: 1.5px; text-underline-offset: 3px; }

  .servicio-hero { padding-bottom: 56px; }
  .servicio-hero .carpeta { padding: calc(var(--tab-h) + 28px) 24px 32px; animation: abrir 520ms var(--ease-out) both; }
  @media (min-width: 768px) { .servicio-hero .carpeta { padding: calc(var(--tab-h) + 48px) 48px 56px; } }
  @keyframes abrir { from { transform: translateY(14px); opacity: 0; } }
  @media (prefers-reduced-motion: reduce) { .servicio-hero .carpeta { animation: none; } }
  .servicio-hero .pestana { cursor: default; }
  .servicio-hero .pestana:active { transform: none; }
  .hero-carpeta { display: grid; gap: 32px; }
  @media (min-width: 1024px) { .hero-carpeta { grid-template-columns: 7fr 4fr; gap: 64px; align-items: end; } }
  .hero-carpeta > * { min-width: 0; }
  .hero-carpeta .copy { display: grid; gap: 18px; }
  .hero-carpeta .kicker { color: var(--tinta); opacity: .8; max-width: 40ch; }
  .hero-carpeta .display { font-size: clamp(2.25rem, 5vw + .5rem, 4.25rem); max-width: 14ch; }
  .indice { display: grid; gap: 2px; }
  .indice small { font: 400 .875rem/1.2 var(--f-titulo); opacity: .75; margin-bottom: 6px; }
  .indice a { display: flex; gap: 14px; align-items: center; padding: 14px 0; border-top: 1.5px solid rgba(30,30,30,.16); text-decoration: none; font: 400 1.125rem/1.25 var(--f-titulo); transition: padding-left 200ms var(--ease-out); }
  @media (hover: hover) and (pointer: fine) { .indice a:hover { padding-left: 6px; } }

  .servicio { border-top: 1.5px solid rgba(30,30,30,.1); }
  .servicio-grid { display: grid; gap: 32px; }
  @media (min-width: 1024px) { .servicio-grid { grid-template-columns: 5fr 7fr; gap: 72px; align-items: start; } .servicio-grid > .intro { position: sticky; top: 120px; } }
  .servicio-grid > * { min-width: 0; }
  .servicio .intro { margin: 0; }
  .te-sirve { background: var(--blanco); border-radius: 28px; padding: 20px 22px; display: grid; gap: 10px; box-shadow: inset 0 0 0 1.5px rgba(30,30,30,.08); }
  .te-sirve b { font: 400 1rem/1.2 var(--f-titulo); color: var(--petroleo); }
  .te-sirve ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
  .te-sirve li { display: flex; gap: 12px; align-items: flex-start; font-size: .975rem; line-height: 1.55; }
  .te-sirve li::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; margin-top: 8px; background: var(--acento); }
  .incluye h3 { font: 400 1.25rem/1.2 var(--f-titulo); margin: 0 0 8px; }
  .incluye ul { list-style: none; margin: 0; padding: 0; display: grid; }
  .incluye li { display: grid; grid-template-columns: 18px 1fr; gap: 16px; padding: 18px 0; border-top: 1.5px solid rgba(30,30,30,.1); }
  .incluye li:last-child { border-bottom: 1.5px solid rgba(30,30,30,.1); }
  .incluye .punto { color: var(--acento-fuerte); margin-top: 3px; }
  .incluye li b { display: block; font: 400 1.125rem/1.3 var(--f-titulo); margin-bottom: 2px; }
  .incluye li span { font-size: .975rem; line-height: 1.6; }

  .cruce .carpeta { padding: calc(var(--tab-h) + 24px) 24px 28px; }
  @media (min-width: 768px) { .cruce .carpeta { padding: calc(var(--tab-h) + 32px) 40px 40px; } }
  .cruce-grid { display: grid; gap: 20px; }
  @media (min-width: 900px) { .cruce-grid { grid-template-columns: 1fr auto; align-items: end; gap: 40px; } }
  .cruce h2 { font: 400 clamp(1.5rem, 2vw + 1rem, 2.25rem)/1.1 var(--f-titulo); letter-spacing: -0.02em; margin: 0 0 10px; }
  .cruce p { margin: 0; max-width: 52ch; }

  /* Quiénes somos: motivación + significado del nombre */
  .motivo { display: grid; gap: 28px; margin-bottom: 48px; }
  @media (min-width: 1024px) { .motivo { grid-template-columns: 7fr 4fr; gap: 72px; align-items: end; margin-bottom: 64px; } }
  .motivo > * { min-width: 0; }
  .motivo .intro { margin: 0; }
  .motivo .lead { max-width: 54ch; }
  .nombre { background: var(--blanco); border-radius: 32px; padding: 24px; display: grid; gap: 8px; justify-items: start; box-shadow: inset 0 0 0 1.5px rgba(30,30,30,.08); }
  .nombre .punto-o { width: 40px; height: 40px; border-radius: 50%; border: 8px solid var(--cian); display: grid; place-items: center; margin-bottom: 6px; }
  .nombre .punto-o::after { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--cian); }
  .nombre-palabra { margin: 0; font: 400 2.25rem/1 var(--f-titulo); letter-spacing: -0.02em; }
  /* Thomsan no trae la ē: se dibuja el macrón sobre la e para no caer en otra tipografía */
  .e-larga { position: relative; }
  .e-larga::after { content: ""; position: absolute; left: 14%; right: 14%; top: .1em; height: .075em; border-radius: 1em; background: currentColor; }
  .nombre-def { margin: 0; font-size: .975rem; line-height: 1.6; color: var(--petroleo); max-width: 34ch; }