/* Óptimo Consultora — estilos (mobile first) */

@font-face {
  font-family: "Sora";
  src: url("assets/fonts/sora-variable.woff2") format("woff2-variations"), url("assets/fonts/sora-variable.woff2") format("woff2");
  font-weight: 100 800;
  font-display: swap;
}
@font-face {
  font-family: "Public Sans";
  src: url("assets/fonts/public-sans-variable.woff2") format("woff2-variations"), url("assets/fonts/public-sans-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --petroleo: #0E4A57;
  --petroleo-hondo: #0A3640;
  --petroleo-claro: #2A6C7A;
  --ladrillo: #C8443A;        /* 4.8:1 sobre blanco: sirve para texto y para botones con texto blanco */
  --ladrillo-hondo: #A9362D;
  --niebla: #EEF3F1;          /* gris verdoso muy claro */
  --blanco: #FFFFFF;
  --tinta: #13343B;
  --suave: #4C6469;
  --linea: #D6E1DE;
  --wa: #1FAF55;
  --error: #B42318;
  --sombra: 0 18px 40px -22px rgba(10, 54, 64, .45);
  --radio: 14px;
  --gutter: 16px;
  --sec: 64px;
  --titulos: "Sora", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --texto: "Public Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --header: 64px;
  color-scheme: light;
}
@media (min-width: 768px) { :root { --gutter: 28px; --sec: 96px; --header: 72px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header) + 12px); }
html.bloqueo { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--blanco); color: var(--tinta);
  font: 400 1.0625rem/1.6 var(--texto);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--petroleo); text-underline-offset: .18em; }
a:hover { color: var(--ladrillo-hondo); }
h1, h2, h3 { font-family: var(--titulos); color: var(--petroleo); margin: 0; line-height: 1.15; letter-spacing: -.02em; text-wrap: balance; }
h2 { font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.5rem); font-weight: 650; }
h3 { font-size: 1.125rem; font-weight: 600; }
p { margin: 0; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--ladrillo); outline-offset: 3px; border-radius: 6px; }
[hidden] { display: none !important; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.saltar { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--petroleo); color: #fff; padding: 10px 16px; border-radius: 8px; }
.saltar:focus { top: 12px; color: #fff; }
.contenedor { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 12px 22px; border-radius: 999px; border: 2px solid transparent;
  font: 600 1rem/1.2 var(--titulos); letter-spacing: -.005em; text-decoration: none; cursor: pointer;
  transition: background-color .18s, border-color .18s, color .18s, transform .18s;
}
.btn:active { transform: translateY(1px); }
.btn__ico { width: 20px; height: 20px; flex: none; }
.btn--rojo { background: var(--ladrillo); color: #fff; }
.btn--rojo:hover { background: var(--ladrillo-hondo); color: #fff; }
.btn--petroleo { background: var(--petroleo); color: #fff; }
.btn--petroleo:hover { background: var(--petroleo-hondo); color: #fff; }
.btn--borde { border-color: var(--petroleo); color: var(--petroleo); background: transparent; }
.btn--borde:hover { background: var(--petroleo); color: #fff; }
.btn--borde-claro { border-color: rgba(255, 255, 255, .5); color: #fff; }
.btn--borde-claro:hover { border-color: #fff; color: #fff; background: rgba(255, 255, 255, .08); }
.btn--chico { min-height: 42px; padding: 8px 18px; font-size: .9375rem; }
.btn--grande { min-height: 54px; padding: 14px 26px; font-size: 1.0625rem; }
.btn--ancho { width: 100%; }
.icono-btn {
  display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none;
  border: 0; border-radius: 12px; background: transparent; color: var(--petroleo); cursor: pointer;
}
.icono-btn svg { width: 24px; height: 24px; }
.icono-btn:hover { background: var(--niebla); }
.icono-btn:disabled { opacity: .3; cursor: default; background: transparent; }

/* ---------- header ---------- */
.header {
  position: sticky; top: 0; z-index: 40; background: rgba(255, 255, 255, .94);
  -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid transparent; transition: border-color .2s, box-shadow .2s;
}
.header.is-scrolled { border-bottom-color: var(--linea); box-shadow: 0 8px 24px -20px rgba(10, 54, 64, .5); }
.header__in { display: flex; align-items: center; gap: 16px; height: var(--header); }
.marca { display: block; color: var(--petroleo); margin-right: auto; padding: 4px 0; }
.marca__logo { width: calc(34px * 3.8027); height: 34px; color: var(--petroleo); }
@media (min-width: 768px) { .marca__logo { width: calc(40px * 3.8027); height: 40px; } }
.header__nav { display: none; }
.header__cta { display: none; }
@media (min-width: 640px) { .header__cta { display: inline-flex; } }
@media (min-width: 1024px) {
  .header__nav { display: flex; gap: 4px; }
  .header__nav a { padding: 8px 12px; border-radius: 8px; color: var(--tinta); text-decoration: none; font-weight: 500; font-size: .9688rem; }
  .header__nav a:hover { color: var(--petroleo); background: var(--niebla); }
  .header__burger { display: none; }
}

/* ---------- menú ---------- */
.menu {
  margin: 0 0 0 auto; width: min(100%, 400px); max-width: 100%; height: 100%; max-height: none;
  border: 0; padding: 16px var(--gutter) calc(24px + env(safe-area-inset-bottom));
  background: var(--petroleo); color: #fff; display: none; flex-direction: column;
}
.menu[open] { display: flex; animation: menu-entra .25s ease-out; }
.menu::backdrop { background: rgba(10, 54, 64, .5); }
@keyframes menu-entra { from { transform: translateX(40px); opacity: 0; } }
.menu__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.marca__logo--menu { color: #fff; }
.menu .icono-btn { color: #fff; }
.menu .icono-btn:hover { background: rgba(255, 255, 255, .1); }
.menu__nav { display: flex; flex-direction: column; }
.menu__nav a { color: #fff; text-decoration: none; font: 500 1.25rem/1.3 var(--titulos); padding: 14px 0; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.menu__nav a:hover { color: #fff; opacity: .8; }
.menu__pie { margin-top: auto; display: grid; gap: 12px; padding-top: 24px; }

/* ---------- hero ---------- */
.hero { padding: 28px 0 48px; }
.hero__in { display: grid; gap: 36px; align-items: center; }
.hero__lugar { display: inline-flex; align-items: center; gap: 8px; color: var(--suave); font-size: .9375rem; font-weight: 500; margin-bottom: 18px; }
.hero__lugar svg { width: 18px; height: 18px; color: var(--ladrillo); flex: none; }
.hero__titulo { font-size: clamp(2.375rem, 1.4rem + 4.6vw, 4.125rem); font-weight: 700; line-height: 1.04; letter-spacing: -.035em; max-width: 13ch; }
.hero__bajada { margin-top: 20px; font-size: clamp(1.0625rem, 1rem + .4vw, 1.25rem); color: var(--suave); max-width: 36em; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.hero__ctas .btn { flex: 1 1 220px; }
.hero__firma { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--linea); font: 600 1rem/1.4 var(--titulos); color: var(--petroleo); display: flex; flex-wrap: wrap; column-gap: 10px; }
.hero__firma span { font: 400 .9375rem/1.4 var(--texto); color: var(--suave); }
@media (min-width: 600px) { .hero__ctas .btn { flex: 0 0 auto; } }
@media (min-width: 960px) {
  .hero { padding: 56px 0 88px; }
  .hero__in { grid-template-columns: 1.05fr .95fr; gap: 56px; }
}

/* panel petróleo con las tarjetas */
.hero__panel {
  position: relative; overflow: hidden; border-radius: 28px; min-height: 340px;
  background:
    linear-gradient(rgba(255, 255, 255, .055) 1px, transparent 1px) 0 0 / 100% 44px,
    radial-gradient(120% 90% at 0% 0%, var(--petroleo-claro) 0%, var(--petroleo) 48%, var(--petroleo-hondo) 100%);
  padding: 28px 20px 96px; display: flex; align-items: flex-start;
}
@media (min-width: 960px) { .hero__panel { min-height: 500px; padding: 48px 40px 150px; } }
.hero__barras { position: absolute; right: 7%; bottom: 0; height: 52%; width: 38%; display: flex; align-items: flex-end; gap: 9%; }
.hero__barras span { flex: 1; border-radius: 10px 10px 0 0; background: rgba(255, 255, 255, .08); transform-origin: bottom; }
.hero__barras span:nth-child(1) { height: 38%; }
.hero__barras span:nth-child(2) { height: 62%; }
.hero__barras span:nth-child(3) { height: 92%; background: var(--ladrillo); opacity: .92; }
.tarjetas { list-style: none; margin: 0; padding: 0; position: relative; z-index: 1; width: 100%; display: grid; gap: 14px; }
.tarjeta {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px;
  padding: 14px 14px 14px 12px; border-radius: 18px; color: #fff; max-width: 360px;
  background: rgba(255, 255, 255, .13); border: 1px solid rgba(255, 255, 255, .24);
  -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: 0 20px 40px -24px rgba(0, 0, 0, .55);
}
.tarjeta--2 { margin-left: 8%; }
.tarjeta--3 { margin-left: 3%; }
@media (min-width: 960px) { .tarjeta--2 { margin-left: 18%; } .tarjeta--3 { margin-left: 7%; } .tarjetas { gap: 18px; } .tarjeta { padding: 16px 18px 16px 14px; } }
.tarjeta__ico { width: 42px; height: 42px; border-radius: 12px; background: rgba(255, 255, 255, .95); color: var(--petroleo); display: grid; place-items: center; }
.tarjeta__ico svg { width: 22px; height: 22px; }
.tarjeta__txt { display: grid; min-width: 0; }
.tarjeta__txt strong { font: 600 .9688rem/1.25 var(--titulos); }
.tarjeta__txt small { font-size: .8438rem; opacity: .82; }
.tarjeta__estado { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px 5px 8px; border-radius: 999px; background: #fff; color: var(--petroleo); font: 600 .8125rem/1 var(--titulos); white-space: nowrap; }
.tarjeta__estado svg { width: 14px; height: 14px; color: var(--ladrillo); }
.tarjeta__estado--neutro { padding: 6px; }
@media (prefers-reduced-motion: no-preference) {
  .js .tarjeta { animation: tarjeta-entra .7s cubic-bezier(.2, .8, .2, 1) both; }
  .js .tarjeta--1 { animation-delay: .25s; }
  .js .tarjeta--2 { animation-delay: .45s; }
  .js .tarjeta--3 { animation-delay: .65s; }
  .js .hero__barras span { animation: barra-crece .9s cubic-bezier(.2, .8, .2, 1) both; }
  .js .hero__barras span:nth-child(2) { animation-delay: .1s; }
  .js .hero__barras span:nth-child(3) { animation-delay: .2s; }
  .js .tarjeta__estado { animation: estado-entra .35s ease-out both; }
  .js .tarjeta--1 .tarjeta__estado { animation-delay: 1s; }
  .js .tarjeta--2 .tarjeta__estado { animation-delay: 1.15s; }
  .js .tarjeta--3 .tarjeta__estado { animation-delay: 1.3s; }
}
@keyframes tarjeta-entra { from { opacity: 0; transform: translateY(18px) scale(.97); } }
@keyframes barra-crece { from { transform: scaleY(0); } }
@keyframes estado-entra { from { opacity: 0; transform: scale(.6); } }

/* ---------- franja de confianza ---------- */
.confianza { border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); background: var(--niebla); }
.confianza__lista { list-style: none; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 18px 16px; padding-top: 22px; padding-bottom: 22px; }
.confianza__lista li { display: flex; align-items: center; gap: 10px; font: 500 .9375rem/1.3 var(--texto); color: var(--tinta); }
.confianza__lista svg { width: 22px; height: 22px; color: var(--petroleo); flex: none; }
@media (min-width: 900px) { .confianza__lista { grid-template-columns: repeat(4, 1fr); padding-top: 26px; padding-bottom: 26px; } }

/* ---------- secciones ---------- */
.seccion { padding: var(--sec) 0; }
.seccion--niebla { background: var(--niebla); }
/* preguntas y fechas alternan solas según haya o no reseñas visibles */
#resenas[hidden] + #preguntas, #resenas:not([hidden]) ~ #fechas { background: var(--niebla); }
#resenas:not([hidden]) ~ #fechas .fecha, .seccion--niebla .fecha { background: #fff; }
#resenas[hidden] ~ #fechas .fecha { background: var(--niebla); border-color: var(--linea); }
#resenas:not([hidden]) + #preguntas .faq__item { background: var(--niebla); border-color: transparent; }
.seccion__cab { margin-bottom: 28px; max-width: 40em; }
.seccion__cab p { margin-top: 10px; color: var(--suave); }
@media (min-width: 768px) { .seccion__cab { margin-bottom: 40px; } }

/* servicios: 3 grupos (columnas en la compu, tabs en el celular) */
.grupos__tabs { display: none; }
.grupos__lista { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.grupo, .grupo__tit, .fila .servicio__nombre { min-width: 0; }
.grupo { display: flex; flex-direction: column; border: 1px solid var(--linea); border-radius: 22px; background: #fff; padding: 22px 8px 10px; }
.grupo__cab { display: flex; gap: 14px; align-items: flex-start; padding: 0 12px 16px; }
.grupo__ico { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 15px; background: var(--niebla); color: var(--petroleo); }
.grupo__ico svg { width: 28px; height: 28px; }
.grupo__tit { min-width: 0; }
.grupo__tit h3 { font-size: 1.3125rem; font-weight: 650; }
.grupo__tit p { margin-top: 4px; color: var(--suave); font-size: .9375rem; line-height: 1.45; }
.grupo__etiqueta { display: inline-block; margin-bottom: 8px; padding: 4px 10px; border-radius: 999px; background: var(--ladrillo); color: #fff; font: 600 .75rem/1.2 var(--titulos); letter-spacing: .01em; }
.grupo__items { list-style: none; margin: 0; padding: 0; }
.grupo__items li + li .fila { border-top: 1px solid var(--linea); }
.fila {
  width: 100%; min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px; border: 0; border-radius: 10px; background: transparent; cursor: pointer; text-align: left;
  transition: background-color .15s;
}
.grupo__items li + li .fila { border-radius: 0 0 10px 10px; }
.fila .servicio__nombre { font: 500 1rem/1.35 var(--texto); color: var(--tinta); letter-spacing: 0; }
.fila__sig { width: 18px; height: 18px; flex: none; color: var(--ladrillo); transition: transform .15s; }
.fila:hover { background: var(--niebla); }
.fila:hover .fila__sig { transform: translateX(3px); }
.fila:focus-visible { outline-offset: -3px; }
/* grupo destacado */
.grupo--destacado { background: var(--petroleo); border-color: var(--petroleo); color: #fff; }
.grupo--destacado .grupo__ico { background: rgba(255, 255, 255, .12); color: #fff; }
.grupo--destacado .grupo__tit h3 { color: #fff; }
.grupo--destacado .grupo__tit p { color: rgba(255, 255, 255, .8); }
.grupo--destacado .grupo__items li + li .fila { border-top-color: rgba(255, 255, 255, .14); }
.grupo--destacado .fila .servicio__nombre { color: #fff; }
.grupo--destacado .fila__sig { color: #fff; opacity: .75; }
.grupo--destacado .fila:hover { background: rgba(255, 255, 255, .08); }
.grupo--destacado .fila:focus-visible { outline-color: #fff; }
/* celular: segmented control + un grupo a la vez */
@media (max-width: 767px) {
  .js .grupos__tabs {
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; padding: 4px; margin-bottom: 14px;
    border-radius: 14px; background: var(--niebla); border: 1px solid var(--linea);
  }
  .grupos__tab {
    min-height: 44px; padding: 8px 6px; border: 0; border-radius: 10px; background: transparent; cursor: pointer;
    font: 600 .9063rem/1.15 var(--titulos); color: var(--suave); letter-spacing: -.01em; overflow-wrap: anywhere;
  }
  @media (max-width: 374px) { .grupos__tab { font-size: .8438rem; padding: 8px 2px; } }
  .grupos__tab[aria-selected="true"] { background: #fff; color: var(--petroleo); box-shadow: 0 2px 8px -3px rgba(10, 54, 64, .35); }
  .js .grupo:not(.is-activo) { display: none; }
  .js .grupo.is-activo { animation: grupo-entra .22s ease-out; }
  .grupo { padding: 18px 4px 6px; }
  .grupo__cab { padding: 0 12px 12px; }
  .fila { min-height: 52px; }
}
@keyframes grupo-entra { from { opacity: 0; transform: translateY(6px); } }
@media (min-width: 768px) {
  .grupos__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
  .grupo { padding: 26px 12px 14px; }
}
.servicio__ico { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid rgba(200, 68, 58, .45); color: var(--ladrillo); display: grid; place-items: center; flex: none; }
.servicio__ico svg { width: 22px; height: 22px; }
.servicios__otro { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 14px; text-align: center; color: var(--suave); font-weight: 500; }

/* cómo trabajamos */
.pasos { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; counter-reset: paso; }
.paso { display: grid; grid-template-columns: 52px 1fr; gap: 16px; position: relative; padding-bottom: 28px; }
.paso:last-child { padding-bottom: 0; }
.paso:not(:last-child)::before { content: ""; position: absolute; left: 25px; top: 56px; bottom: 6px; width: 2px; background: var(--linea); }
.paso__num { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--niebla); color: var(--ladrillo); font: 700 1.375rem/1 var(--titulos); }
.paso h3 { font-size: 1.1875rem; padding-top: 12px; }
.paso p { margin-top: 6px; color: var(--suave); max-width: 32em; }
@media (min-width: 900px) {
  .pasos { grid-template-columns: repeat(3, 1fr); gap: 32px; }
  .paso { grid-template-columns: 1fr; gap: 18px; padding-bottom: 0; }
  .paso:not(:last-child)::before { left: 68px; right: -24px; top: 26px; bottom: auto; width: auto; height: 2px; }
  .paso h3 { padding-top: 0; }
}

/* fechas (fondo claro: alterna con preguntas frecuentes) */
.fechas { display: grid; gap: 28px; }
.fechas__nota { margin-top: 14px; font-size: .9375rem; color: var(--suave); max-width: 34em; }
.fechas__lista { margin: 0; display: grid; gap: 12px; }
.fecha { padding: 20px 20px 22px; border-radius: 18px; background: #fff; border: 1px solid var(--linea); border-left: 4px solid var(--ladrillo); }
.fecha dt { display: flex; align-items: center; gap: 10px; font: 500 .9688rem/1.3 var(--texto); color: var(--suave); }
.fecha dt svg { width: 20px; height: 20px; color: var(--ladrillo); flex: none; }
.fecha dd { margin: 10px 0 0; font: 650 clamp(1.375rem, 1.1rem + 1.2vw, 1.75rem)/1.2 var(--titulos); letter-spacing: -.02em; color: var(--petroleo); }
@media (min-width: 900px) {
  .fechas { grid-template-columns: .9fr 1.1fr; gap: 56px; align-items: center; }
  .fechas__lista { grid-template-columns: 1fr 1fr; gap: 16px; }
  .fecha { padding: 26px 24px 28px; }
}

/* cierre (antes de contacto) */
.cierre { background: var(--petroleo); color: #fff; padding: 56px 0; position: relative; overflow: hidden; }
.cierre::after { content: ""; position: absolute; right: -40px; bottom: -60px; width: 220px; height: 220px; border-radius: 50%; background: var(--ladrillo); opacity: .14; pointer-events: none; }
.cierre__in { position: relative; z-index: 1; display: grid; gap: 24px; }
.cierre h2 { color: #fff; max-width: 18ch; }
.cierre p { margin-top: 12px; color: rgba(255, 255, 255, .85); font-size: 1.125rem; max-width: 32em; }
.cierre__ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.cierre__ctas .btn { flex: 1 1 240px; }
@media (min-width: 900px) {
  .cierre { padding: 72px 0; }
  .cierre__in { grid-template-columns: 1fr auto; align-items: center; gap: 48px; }
  .cierre__ctas .btn { flex: 0 0 auto; }
}

/* profesional */
.profesional { display: grid; gap: 28px; align-items: center; }
.avatar, .profesional__img {
  width: 148px; height: 148px; border-radius: 50%; flex: none;
}
.avatar {
  display: grid; place-items: center; grid-auto-flow: column; justify-content: center;
  background: #fff; border: 3px solid var(--petroleo); box-shadow: 0 0 0 8px #fff;
  font: 700 3.25rem/1 var(--titulos); letter-spacing: -.04em; color: var(--petroleo);
}
.avatar span { color: var(--ladrillo); }
.profesional__img { object-fit: cover; box-shadow: 0 0 0 8px #fff; }
.profesional__titulo { margin-top: 8px; color: var(--suave); font-weight: 500; display: flex; flex-wrap: wrap; column-gap: 14px; row-gap: 4px; }
.profesional__mat { color: var(--petroleo); }
.profesional__bio { margin-top: 18px; max-width: 38em; font-size: 1.0938rem; }
.profesional .btn { margin-top: 24px; }
@media (min-width: 768px) {
  .profesional { grid-template-columns: auto 1fr; gap: 56px; max-width: 980px; }
  .avatar, .profesional__img { width: 220px; height: 220px; }
  .avatar { font-size: 4.75rem; }
}

/* preguntas */
.faq-wrap { display: grid; gap: 24px; }
.faq-wrap__cab p { margin-top: 10px; color: var(--suave); }
@media (min-width: 900px) { .faq-wrap { grid-template-columns: .8fr 1.2fr; gap: 56px; align-items: start; } .faq-wrap__cab { position: sticky; top: calc(var(--header) + 24px); } }
.faq { display: grid; gap: 10px; }
.faq__item { background: #fff; border-radius: var(--radio); border: 1px solid var(--linea); }
.faq__item summary {
  list-style: none; cursor: pointer; padding: 18px 52px 18px 18px; position: relative;
  font: 600 1.0313rem/1.35 var(--titulos); color: var(--petroleo); letter-spacing: -.01em;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: ""; position: absolute; right: 18px; top: 50%; width: 14px; height: 14px; margin-top: -7px;
  background: linear-gradient(var(--ladrillo), var(--ladrillo)) center / 14px 2px no-repeat, linear-gradient(var(--ladrillo), var(--ladrillo)) center / 2px 14px no-repeat;
  transition: transform .2s;
}
.faq__item[open] summary::after { transform: rotate(45deg); }
.faq__item p { padding: 0 18px 20px; color: var(--suave); max-width: 40em; }

/* reseñas */
.resenas { display: grid; gap: 16px; }
@media (min-width: 768px) { .resenas { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); } }
.resena { margin: 0; padding: 24px; border-radius: 18px; border: 1px solid var(--linea); }
.resena blockquote { margin: 0; }
.resena figcaption { margin-top: 14px; display: flex; flex-direction: column; font-size: .9375rem; color: var(--suave); }
.resena figcaption strong { color: var(--petroleo); font-family: var(--titulos); }

/* contacto */
.contacto { display: grid; gap: 32px; }
.contacto__intro { margin-top: 12px; color: var(--suave); max-width: 32em; }
.datos { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 18px; }
.dato { display: flex; gap: 14px; align-items: flex-start; }
.dato > svg { width: 22px; height: 22px; color: var(--ladrillo); flex: none; margin-top: 2px; }
.dato p { color: var(--suave); }
.dato .dato__fuerte { color: var(--tinta); font-weight: 600; }
.dato__fuerte a { color: var(--petroleo); }
.horarios { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.horarios strong { font-weight: 600; margin-right: 6px; }
.contacto__ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.contacto__ctas .btn { flex: 1 1 auto; }
.mapa { border-radius: 20px; overflow: hidden; min-height: 300px; background: var(--niebla); border: 1px solid var(--linea); }
.mapa iframe { display: block; width: 100%; height: 100%; min-height: 300px; border: 0; }
@media (min-width: 900px) { .contacto { grid-template-columns: 1fr 1fr; gap: 56px; } .mapa, .mapa iframe { min-height: 440px; } .contacto__ctas .btn { flex: 0 0 auto; } }

/* ---------- footer ---------- */
.footer { background: var(--petroleo-hondo); color: rgba(255, 255, 255, .8); padding: 48px 0 32px; font-size: .9375rem; }
@media (min-width: 1024px) { .footer { padding-bottom: 40px; } }
.footer a { color: #fff; }
.footer__in { display: grid; gap: 28px; }
.marca__logo--footer { color: #fff; width: calc(40px * 3.8027); height: 40px; margin-bottom: 16px; }
.footer__datos { display: grid; gap: 6px; align-content: start; }
.footer__legal summary { cursor: pointer; color: #fff; font-weight: 500; }
.footer__legal p { margin-top: 10px; max-width: 46em; font-size: .875rem; }
.footer__pie { border-top: 1px solid rgba(255, 255, 255, .14); padding-top: 20px; font-size: .8125rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; }
@media (min-width: 900px) { .footer__in { grid-template-columns: 1.2fr 1fr 1fr; } .footer__pie { grid-column: 1 / -1; } }

/* ---------- diálogos (base) ---------- */
dialog { color: var(--tinta); }
dialog::backdrop { background: rgba(10, 40, 48, .55); }

/* asistente de consulta: pantalla completa en el celular */
.consulta {
  margin: 0; padding: 0; border: 0; width: 100%; max-width: 100%; height: 100%; max-height: 100%;
  background: #fff;
}
.consulta[open] { display: flex; }
.consulta__form { display: flex; flex-direction: column; width: 100%; min-height: 0; flex: 1; }
.consulta__cab { display: flex; align-items: center; gap: 8px; padding: calc(10px + env(safe-area-inset-top)) 10px 10px; }
.consulta__cab-txt { flex: 1; text-align: center; }
.consulta__titulo { font: 600 1rem/1.2 var(--titulos); color: var(--petroleo); }
.consulta__paso { font-size: .8125rem; color: var(--suave); }
.consulta__progreso { height: 4px; background: var(--niebla); }
.consulta__progreso span { display: block; height: 100%; width: calc(var(--p, .2) * 100%); background: var(--ladrillo); border-radius: 0 4px 4px 0; transition: width .3s ease; }
.consulta__cuerpo { flex: 1; overflow-y: auto; padding: 24px var(--gutter) 16px; overscroll-behavior: contain; }
.paso-c { border: 0; margin: 0; padding: 0; min-width: 0; }
.paso-c legend { font: 650 1.5rem/1.2 var(--titulos); color: var(--petroleo); letter-spacing: -.02em; padding: 0; margin-bottom: 20px; outline: none; }
.entra-der { animation: entra-der .28s ease-out; }
.entra-izq { animation: entra-izq .28s ease-out; }
@keyframes entra-der { from { opacity: 0; transform: translateX(24px); } }
@keyframes entra-izq { from { opacity: 0; transform: translateX(-24px); } }
.consulta__aviso { display: flex; gap: 10px; align-items: flex-start; margin-top: 24px; padding: 12px 14px; border-radius: 12px; background: var(--niebla); font-size: .875rem; color: var(--suave); }
.consulta__aviso svg { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--petroleo); }
.consulta__pie { padding: 12px var(--gutter) calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--linea); background: #fff; }
.consulta__estado { font-size: .9063rem; color: var(--error); margin-bottom: 10px; }
.consulta__estado:empty { display: none; }
.consulta__estado a { color: var(--petroleo); font-weight: 600; }
@media (min-width: 720px) {
  .consulta { margin: auto; width: min(580px, 92vw); height: auto; max-height: min(780px, 90dvh); border-radius: 22px; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .5); }
  .consulta[open] { animation: modal-entra .25s ease-out; }
  .consulta__cab { padding-top: 12px; }
  .consulta__cuerpo { padding: 28px 32px 16px; }
  .consulta__pie { padding: 14px 32px 20px; }
}
@keyframes modal-entra { from { opacity: 0; transform: translateY(16px) scale(.98); } }

/* opciones del asistente */
.ops { display: grid; gap: 10px; }
.ops--chips { grid-template-columns: 1fr 1fr; gap: 8px; }
@media (min-width: 720px) { .ops--grandes { grid-template-columns: 1fr 1fr; } }
.op { position: relative; display: flex; align-items: center; gap: 10px; padding: 14px 16px; border: 1.5px solid var(--linea); border-radius: 14px; cursor: pointer; background: #fff; transition: border-color .15s, background-color .15s; }
.op:hover { border-color: var(--petroleo-claro); }
.op input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.op__txt { flex: 1; display: grid; gap: 2px; min-width: 0; }
.op__txt strong { font: 600 1rem/1.3 var(--titulos); color: var(--tinta); letter-spacing: -.01em; overflow-wrap: anywhere; }
.op__txt small { font-size: .875rem; color: var(--suave); }
.op__check { width: 22px; height: 22px; flex: none; padding: 4px; border-radius: 50%; border: 1.5px solid var(--linea); color: transparent; }
.op:has(input:checked) { border-color: var(--petroleo); background: var(--niebla); }
.op:has(input:checked) .op__check { background: var(--petroleo); border-color: var(--petroleo); color: #fff; }
.op:has(input:focus-visible) { outline: 3px solid var(--ladrillo); outline-offset: 2px; }
.ops--chips .op { padding: 12px; min-height: 58px; }
.ops--chips .op__txt strong { font-size: .9063rem; }
.ops--chips .op__check { display: none; }
.ops--grandes .op { padding: 18px; }
.campo { display: grid; gap: 6px; margin-bottom: 18px; }
.campo label { font-weight: 600; }
.campo__opc { font-weight: 400; color: var(--suave); }
.campo input { font: inherit; padding: 13px 14px; border: 1.5px solid var(--linea); border-radius: 12px; min-height: 52px; color: var(--tinta); background: #fff; width: 100%; }
.campo input:focus { outline: none; border-color: var(--petroleo); box-shadow: 0 0 0 3px rgba(14, 74, 87, .18); }
.campo input[aria-invalid="true"] { border-color: var(--error); }
.campo__error { color: var(--error); font-size: .875rem; }
.campo__error:empty { display: none; }
.resumen { margin: 0; display: grid; border: 1px solid var(--linea); border-radius: 14px; }
.resumen > div { display: grid; grid-template-columns: 92px 1fr auto; gap: 10px; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--linea); }
.resumen > div:last-child { border-bottom: 0; }
.resumen dt { font-size: .875rem; color: var(--suave); }
.resumen dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.resumen__editar { border: 0; background: none; color: var(--petroleo); text-decoration: underline; text-underline-offset: .18em; font-size: .875rem; cursor: pointer; padding: 6px 2px; }
.resumen__msj-tit { margin-top: 20px; font-size: .875rem; color: var(--suave); }
.resumen__msj { margin-top: 8px; padding: 14px 16px; border-radius: 4px 16px 16px 16px; background: #E8F5EC; color: #173A26; white-space: pre-line; font-size: .9688rem; }

/* hoja de servicio: bottom sheet en el celular */
.hoja {
  margin: auto 0 0; width: 100%; max-width: 100%; border: 0; padding: 10px var(--gutter) calc(20px + env(safe-area-inset-bottom));
  border-radius: 22px 22px 0 0; background: #fff;
}
.hoja[open] { animation: hoja-sube .28s cubic-bezier(.2, .8, .2, 1); }
@keyframes hoja-sube { from { transform: translateY(100%); } }
.hoja__agarre { width: 40px; height: 4px; border-radius: 4px; background: var(--linea); margin: 0 auto 14px; }
.hoja__cab { display: flex; align-items: center; gap: 14px; }
.hoja__titulo { flex: 1; font-size: 1.25rem; }
.hoja__desc { margin: 16px 0 22px; color: var(--suave); font-size: 1.0625rem; }
@media (min-width: 720px) {
  .hoja { margin: auto; width: min(500px, 92vw); border-radius: 22px; padding: 24px 28px 28px; }
  .hoja[open] { animation: modal-entra .25s ease-out; }
  .hoja__agarre { display: none; }
}

/* asistente "¿Tenés dudas?" */
.dudas {
  margin: auto 0 0; width: 100%; max-width: 100%; max-height: 88dvh; border: 0; padding: 0;
  border-radius: 22px 22px 0 0; background: #fff; flex-direction: column;
}
.dudas[open] { display: flex; animation: hoja-sube .28s cubic-bezier(.2, .8, .2, 1); }
@media (min-width: 720px) {
  .dudas { margin: auto 24px 24px auto; width: 400px; max-height: min(640px, 85dvh); border-radius: 22px; box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .45); }
  .dudas[open] { animation: modal-entra .25s ease-out; }
}
.dudas__cab { display: flex; align-items: center; gap: 12px; padding: 14px 12px 14px 16px; background: var(--petroleo); color: #fff; }
.dudas__cab > div { flex: 1; }
.dudas__avatar { width: 40px; height: 40px; border-radius: 50%; background: #fff; display: grid; place-items: center; grid-auto-flow: column; justify-content: center; font: 700 1rem/1 var(--titulos); color: var(--petroleo); letter-spacing: -.04em; }
.dudas__avatar span { color: var(--ladrillo); }
.dudas__titulo { font: 600 1rem/1.2 var(--titulos); }
.dudas__sub { font-size: .8125rem; opacity: .8; }
.dudas .icono-btn { color: #fff; }
.dudas .icono-btn:hover { background: rgba(255, 255, 255, .12); }
.dudas__log { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 8px; background: var(--niebla); min-height: 120px; }
.burbuja { max-width: 86%; padding: 10px 14px; border-radius: 16px; font-size: .9375rem; }
.burbuja--el { background: #fff; border-top-left-radius: 4px; align-self: flex-start; }
.burbuja--yo { background: var(--petroleo); color: #fff; border-top-right-radius: 4px; align-self: flex-end; }
.dudas__pie { padding: 12px 16px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--linea); }
.dudas__opciones { display: flex; flex-wrap: wrap; gap: 8px; max-height: 34dvh; overflow-y: auto; }
.dudas__op { border: 1.5px solid var(--petroleo); background: #fff; color: var(--petroleo); border-radius: 999px; padding: 8px 14px; font-size: .9063rem; font-weight: 500; cursor: pointer; text-align: left; }
.dudas__op:hover { background: var(--petroleo); color: #fff; }
.dudas__wa { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: .9063rem; font-weight: 600; color: var(--petroleo); }
.dudas__wa svg { width: 20px; height: 20px; color: var(--wa); flex: none; }

/* ---------- botones flotantes y barra inferior ---------- */
.flotantes {
  position: fixed; z-index: 30; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 10px; transition: opacity .2s, transform .2s, visibility .2s;
}
.flotante { display: inline-flex; align-items: center; justify-content: center; border: 0; cursor: pointer; box-shadow: 0 12px 28px -12px rgba(10, 54, 64, .6); text-decoration: none; }
.flotante svg { width: 26px; height: 26px; }
.flotante--wa { width: 56px; height: 56px; border-radius: 50%; background: var(--wa); color: #fff; }
.flotante--wa:hover { color: #fff; filter: brightness(1.05); }
.flotante--dudas { gap: 8px; height: 48px; padding: 0 18px 0 14px; border-radius: 999px; background: #fff; color: var(--petroleo); border: 1.5px solid var(--linea); font: 600 .9375rem/1 var(--titulos); }
.flotante--dudas svg { width: 22px; height: 22px; }
.flotante--dudas:hover { border-color: var(--petroleo); }

.barra {
  position: fixed; z-index: 31; left: 0; right: 0; bottom: 0;
  display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center;
  padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .97); border-top: 1px solid var(--linea);
  box-shadow: 0 -10px 30px -20px rgba(10, 54, 64, .5);
  transform: translateY(110%); transition: transform .25s ease;
}
.barra .btn { min-height: 48px; }
.icono-btn--dudas { width: 48px; height: 48px; border: 1.5px solid var(--linea); border-radius: 50%; }
.icono-btn--wa { width: 48px; height: 48px; border-radius: 50%; background: var(--wa); color: #fff; }
.icono-btn--wa:hover { background: var(--wa); color: #fff; filter: brightness(1.05); }
.barra-visible .barra { transform: none; }
/* celular: UNA sola cosa abajo, la barra fija. Los flotantes son solo para la compu. */
@media (max-width: 1023px) {
  .flotantes { display: none; }
  body { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
}
@media (min-width: 1024px) { .barra { display: none; } .flotantes { right: 24px; bottom: 24px; } }
html.bloqueo .flotantes { visibility: hidden; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; }
}

/* Trayectoria del profesional */
.profesional__hitos { list-style: none; margin: 18px 0 22px; padding: 0; display: grid; gap: 10px; max-width: 38em; }
.profesional__hitos li { display: flex; gap: 10px; align-items: flex-start; font-size: .97rem; line-height: 1.45; }
.profesional__hitos svg { flex: 0 0 18px; width: 18px; height: 18px; margin-top: 2px; color: var(--ladrillo); }

/* crédito del pie (texto + logo opcional) */
.footer__credito { display: inline-flex; align-items: center; gap: 6px; }
.footer__credito a { display: inline-flex; align-items: center; }
.footer__credito-logo { height: 20px; width: auto; display: inline-block; }