/* Oli · negocios.css — solo /negocios/ */

/* ───────── Hero: teléfono al frente, la acuarela asoma detrás ───────── */
.neg-hero .acciones { margin-top: var(--s-2); }
.neg-hero__arte { position: relative; display: grid; margin-top: var(--s-6); }
.neg-hero__arte > * { grid-area: 1 / 1; }
.neg-hero__lamina { position: relative; z-index: 2; width: min(62%, 280px); justify-self: end; margin-right: 6%; }
.neg-hero__polaroid { position: relative; z-index: 1; width: 40%; max-width: 200px; justify-self: start; align-self: center; margin-left: 2%; }
@media (min-width: 640px) { .neg-hero__arte { max-width: 520px; margin-left: auto; width: 100%; } }
@media (min-width: 1024px) {
  .neg-hero__arte { margin: 0; max-width: none; }
  .neg-hero__lamina { width: min(100%, 290px); justify-self: center; margin-right: 0; }
  .neg-hero__polaroid { width: 190px; margin-left: -70px; align-self: end; margin-bottom: 90px; }
}
@media (prefers-reduced-motion: no-preference) {
  .js .neg-hero__lamina { animation: recorte 600ms var(--ease-suave) both; }
  .js .neg-hero__lamina img { animation: recorte-img 600ms var(--ease-suave) both; }
  .js .neg-hero__polaroid { animation: recorte 600ms var(--ease-suave) 160ms both; }
  .js .neg-hero__polaroid img { animation: recorte-img 600ms var(--ease-suave) 160ms both; }
}

/* ───────── Los 4 pasos, unidos por el hilo ───────── */
.n-pasos { position: relative; }
ol.n-pasos__lista { position: relative; z-index: var(--z-contenido); display: grid; gap: var(--s-7); padding-left: 36px; }
.n-pasos__lista li { position: relative; display: grid; gap: var(--s-2); align-content: start; max-width: 46ch; }
/* Un tramo corto une cada «Paso N» con el hilo */
.n-pasos__lista li::before { content: ""; position: absolute; left: -22px; top: 14px; width: 16px; height: 2px; border-radius: 2px; background: var(--hilo); }
.n-pasos__lista .paso-num { justify-self: start; }
.n-pasos__hilo--h { display: none; }
.n-pasos__hilo--v { left: 2px; top: 12px; bottom: 12px; width: 24px; height: calc(100% - 24px); }
.solicitud__nota { margin-top: var(--s-6); }
@media (min-width: 1024px) {
  .n-pasos { grid-column: 3 / 13; }
  ol.n-pasos__lista { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gutter); padding-left: 0; padding-top: 48px; align-items: start; }
  .n-pasos__hilo--v { display: none; }
  .n-pasos__lista li::before { left: 6px; top: -34px; width: 2px; height: 28px; }
  /* La onda termina sobre el último tick: el 4.º paso arranca en 3/4 del ancho (+6 px) */
  .n-pasos__hilo--h { display: block; left: 0; top: 0; width: calc(75% + var(--gutter) * .25 + 8px); height: 24px; }
  .solicitud__nota { grid-column: 3 / 13; }
}

/* ───────── Esquema del panel: un garabato a mano en lugar del número ───────── */
.esquema-panel { background: var(--off-white); border-radius: var(--r-panel); box-shadow: var(--sombra-papel); padding: var(--s-4) var(--s-5); view-timeline: --panel block; }
.esquema-panel__lista li { display: grid; grid-template-columns: auto minmax(16px, 1fr) 84px; align-items: end; gap: var(--s-3); padding-block: var(--s-4); }
.esquema-panel__lista li + li { border-top: 1px solid var(--sand); }
.esquema-panel__nombre { font-weight: 600; font-size: 15px; line-height: 1.35; max-width: 30ch; }
.esquema-panel__puntos { border-bottom: 2px dotted var(--bone); margin-bottom: 6px; }
.esquema-panel__garabato { display: grid; justify-items: end; line-height: 1; }
.esquema-panel__garabato svg { width: 80px; height: 30px; overflow: visible; }
.esquema-panel__garabato path { fill: none; stroke: var(--terracota); stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; }
.esquema-panel__garabato i { margin-top: 2px; font-family: var(--f-italica); font-size: 13px; color: var(--slate); }
.metricas__nota { margin-top: var(--s-4); }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .js .esquema-panel__garabato path { stroke-dasharray: 1; animation: traza linear both; animation-timeline: --panel; animation-range: entry 40% cover 45%; }
    .js .esquema-panel__lista li:nth-child(2) path { animation-range: entry 50% cover 48%; }
    .js .esquema-panel__lista li:nth-child(3) path { animation-range: entry 60% cover 51%; }
    .js .esquema-panel__lista li:nth-child(4) path { animation-range: entry 70% cover 54%; }
    .js .esquema-panel__lista li:nth-child(5) path { animation-range: entry 80% cover 57%; }
    .js .esquema-panel__lista li:nth-child(6) path { animation-range: entry 90% cover 60%; }
  }
}
@media (min-width: 1024px) {
  .esquema-panel { grid-column: 3 / 10; padding: var(--s-5) var(--s-7); }
  .esquema-panel__lista li { grid-template-columns: auto minmax(40px, 1fr) 100px; }
  .metricas__nota { grid-column: 3 / 10; }
}

/* ───────── Tarifario ───────── */
.planes { background-color: var(--cream-deep); background-image: none; }
.tarifario-caja { min-width: 0; }
.tabla-scroll { position: relative; overflow-x: auto; }
.tarifario { width: 100%; table-layout: fixed; border-collapse: collapse; background: var(--cream-deep); font-size: 15px; line-height: 1.45; }
.tarifario caption { text-align: left; caption-side: top; font-size: var(--t-caption); color: var(--slate); padding-bottom: var(--s-4); }
.tarifario th, .tarifario td { text-align: left; vertical-align: top; padding: var(--s-4) var(--s-4) var(--s-4) 0; border-bottom: 1px solid var(--bone); }
.tarifario tbody th { font-weight: 600; color: var(--ink); width: 28%; }
.tarifario td { color: var(--ink); }
.tarifario thead th { vertical-align: bottom; padding-bottom: var(--s-5); }
.tarifario thead td { border-bottom: 1px solid var(--bone); }
.tarifario__plan { display: block; font-family: var(--f-texto); font-weight: 500; font-size: 1.375rem; line-height: 1.2; color: var(--ink); }
.tarifario__precio { display: block; margin-top: var(--s-2); font-family: var(--f-texto); font-weight: 500; font-size: var(--t-precio); line-height: 1; letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums lining-nums; }
.tarifario__mes { display: block; margin-top: 6px; font-weight: 400; font-size: 15px; color: var(--slate); }
.tarifario .si, .tarifario .no { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.tarifario .si .icono, .tarifario .no .icono { width: 18px; height: 18px; }
.tarifario .si .icono { color: var(--terracota-deep); }
.tarifario .no .icono { color: var(--slate); }
.tarifario__alta { margin-top: var(--s-6); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-6); }
.tarifario__alta p { max-width: 52ch; font-size: 15px; color: var(--graphite); }
.tarifario__extra { margin-top: var(--s-5); padding-block: var(--s-4); border-block: 1px solid var(--bone); font-family: var(--f-texto); font-weight: 500; font-size: clamp(1.125rem, 1rem + .5vw, 1.375rem); line-height: 1.35; color: var(--ink); }
.tarifario__notas { margin-top: var(--s-7); display: grid; align-content: start; gap: var(--s-2); font-size: var(--t-caption); line-height: 1.5; color: var(--slate); max-width: 70ch; }

/* Pestañas de plan en móvil */
.planes-tabs { display: none; }
@media (max-width: 767px) {
  .js .planes-tabs:not([hidden]) { display: flex; gap: var(--s-2); margin-bottom: var(--s-4); }
  .planes-tabs button {
    flex: 1; min-height: 44px; border: 1.5px solid var(--ink); border-radius: var(--r-pildora);
    background: transparent; color: var(--ink); font-weight: 600; font-size: 15px; touch-action: manipulation;
  }
  .planes-tabs button[aria-selected="true"] { background: var(--ink); color: var(--cream); }
  .js .tarifario[data-plan] th[data-plan], .js .tarifario[data-plan] td[data-plan] { display: none; }
  .js .tarifario[data-plan="gratis"] th[data-plan="gratis"], .js .tarifario[data-plan="gratis"] td[data-plan="gratis"],
  .js .tarifario[data-plan="premium"] th[data-plan="premium"], .js .tarifario[data-plan="premium"] td[data-plan="premium"],
  .js .tarifario[data-plan="ultra"] th[data-plan="ultra"], .js .tarifario[data-plan="ultra"] td[data-plan="ultra"] { display: table-cell; }
  .js .tarifario[data-plan] tbody th { width: 44%; }
  .js .tarifario[data-plan] thead td { width: 44%; }
  .no-js .tarifario { min-width: 640px; }
}
@media (max-width: 767px) and (prefers-reduced-motion: no-preference) {
  .tarifario.cambia-plan [data-plan] { animation: plan-entra 200ms var(--ease-suave) both; }
}
@keyframes plan-entra { from { opacity: 0; } to { opacity: 1; } }
@media (min-width: 1024px) {
  /* El tarifario y su letra chica arrancan en la columna de los títulos (3), como toda la página */
  .tarifario-caja { grid-column: 3 / 13; }
  .tarifario { font-size: 16px; }
  .tarifario tbody th, .tarifario thead td { width: 22%; }
  .tarifario th, .tarifario td { padding-right: var(--s-6); }
}

/* ───────── La tarjeta encimada, junto a las notas de precio ───────── */
.encimada {
  position: relative; z-index: 3; margin-top: var(--s-7); width: min(100%, 460px); justify-self: end;
  background: var(--off-white); box-shadow: var(--sombra-alzada); border-radius: var(--r-papel);
  padding: var(--s-6) var(--s-5); rotate: -1.2deg; display: grid; gap: var(--s-4);
}
.encimada__sello { width: 96px; }
.encimada h2 { font-family: var(--f-display); font-size: 2.25rem; line-height: 1.06; letter-spacing: -.015em; }
.encimada__lista { display: grid; }
.encimada__lista li { padding-block: var(--s-3); border-top: 1px solid var(--sand); font-size: 16px; line-height: 1.5; }
.encimada__cierre { font-family: var(--f-italica); font-style: italic; font-size: 1.1875rem; line-height: 1.4; color: var(--graphite); }
@media (min-width: 1024px) {
  .tarifario__notas { grid-column: 3 / 8; grid-row: 3; }
  .encimada { grid-column: 8 / 13; grid-row: 3; align-self: start; margin-top: var(--s-7); padding: var(--s-7) var(--s-6); }
}

/* ───────── Cupones y eventos ───────── */
.extras .grid { row-gap: var(--s-8); }
.extras h2 { margin-bottom: var(--s-4); }
.extras p { max-width: 52ch; }
.cupon-figura { margin-top: var(--s-6); display: grid; gap: var(--s-3); justify-items: start; }
.cupon {
  --muesca: radial-gradient(circle 6px at 0 50%, #0000 98%, #000) 0 0 / 51% 18px repeat-y, radial-gradient(circle 6px at 100% 50%, #0000 98%, #000) 100% 0 / 51% 18px repeat-y;
  display: grid; grid-template-columns: minmax(0, 1fr) 76px; width: min(300px, 100%); min-height: 120px;
  border-radius: 4px; outline-offset: 6px;
}
.cupon__cuerpo, .cupon__talon { background: var(--terracota-soft); -webkit-mask: var(--muesca); mask: var(--muesca); }
.cupon__cuerpo { display: grid; align-content: center; gap: 4px; padding: var(--s-4) var(--s-4) var(--s-4) var(--s-5); border-right: 2px dashed var(--rosa); }
.cupon__rotulo { font-weight: 600; font-size: 13px; color: var(--terracota-deep); }
.cupon__oferta { font-family: var(--f-texto); font-weight: 500; font-size: 1.375rem; line-height: 1.15; color: var(--ink); }
.cupon__cond { font-size: 13px; line-height: 1.35; color: var(--terracota-deep); }
.cupon__talon { display: grid; place-items: center; color: var(--terracota-deep); transform-origin: 0 100%; }
.cupon__talon .icono { width: 28px; height: 28px; }
@media (prefers-reduced-motion: no-preference) {
  .cupon__talon { transition: translate 200ms var(--ease-resorte), rotate 200ms var(--ease-resorte); }
}
.cupon:focus-visible .cupon__talon { translate: 6px 0; rotate: 2deg; }
@media (hover: hover) { .cupon:hover .cupon__talon { translate: 6px 0; rotate: 2deg; } }
@media (min-width: 1024px) {
  .extras__cupones { grid-column: 3 / 8; }
  .extras__reservar { grid-column: 9 / 13; padding-top: 0; }
}

/* ───────── Cierre ───────── */
.cierre-int__in { display: grid; gap: var(--s-5); justify-items: start; }
.cierre-int__texto { font-size: var(--t-lead); color: var(--graphite); max-width: 40ch; }
@media (min-width: 1024px) { .cierre-int__in { grid-column: 3 / 11; } }
.tabla__nota { display: block; margin-top: 2px; font-family: var(--f-sans); font-weight: 400; font-size: var(--t-caption); color: var(--slate); }