/* Inmopro Kit - integracion con Elementor y piezas propias.
   Las utilidades (ip-utilities.css) se cargan antes; este archivo las complementa. */

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body.ip-site {
  background-color: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ------------------------------------------------------------------ Reset acotado a los widgets propios
   (equivale al preflight de Tailwind, sin tocar el resto del sitio). `:where()` mantiene la
   especificidad por debajo de las utilidades. */
html body.ip-site :where(.ip, .ip *, .ip ::before, .ip ::after) {
  box-sizing: border-box;
  border: 0 solid;
  border-color: var(--border);
  margin: 0;
  padding: 0;
}
html body.ip-site :where(.ip) { line-height: 1.5; font-family: var(--font-sans); color: var(--foreground); }
html body.ip-site :where(.ip :is(h1, h2, h3, h4, h5, h6)) { font-size: inherit; font-weight: inherit; line-height: inherit; color: inherit; font-family: inherit; }
/* Algunos temas equilibran los renglones de los titulos (text-wrap: balance) o fuerzan cortes de palabra. */
html body.ip-site :where(.ip :is(h1, h2, h3, h4, h5, h6, p, li, blockquote, figcaption, legend, label, span)) { text-wrap: wrap; overflow-wrap: normal; hyphens: manual; text-transform: none; }
html body.ip-site :where(.ip a),
html body.ip-site :where(.ip a):hover,
html body.ip-site :where(.ip a):focus,
html body.ip-site :where(.ip a):active { color: inherit; text-decoration: inherit; }
html body.ip-site :where(.ip :is(ol, ul, menu)) { list-style: none; }
html body.ip-site :where(.ip :is(img, svg, video)) { display: block; vertical-align: middle; }
html body.ip-site :where(.ip :is(img, video)) { max-width: 100%; height: auto; border-radius: 0; box-shadow: none; }
html body.ip-site :where(.ip :is(b, strong)) { font-weight: bolder; }
html body.ip-site :where(.ip blockquote) { quotes: none; }
html body.ip-site :where(.ip :is(figcaption, blockquote, legend)) { font-size: inherit; font-style: normal; font-weight: inherit; line-height: inherit; color: inherit; }
html body.ip-site :where(.ip :is(button, input, select, textarea)),
html body.ip-site :where(.ip :is(button, [type="button"], [type="submit"])):hover,
html body.ip-site :where(.ip :is(button, [type="button"], [type="submit"])):focus {
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  background-color: transparent;
  border-radius: 0;
  text-transform: none;
  text-align: inherit;
  white-space: normal;
  width: auto;
  box-shadow: none;
  text-decoration: none;
  transition: none;
}
html body.ip-site :where(.ip button) { cursor: pointer; appearance: none; -webkit-appearance: none; user-select: auto; }
html body.ip-site :where(.ip button:disabled) { cursor: default; }
html body.ip-site :where(.ip label) { display: inline; line-height: inherit; vertical-align: baseline; }
html body.ip-site :where(.ip fieldset) { min-width: 0; }
html body.ip-site :where(.ip legend) { float: none; width: auto; }
html body.ip-site .ip [hidden] { display: none !important; }
html body.ip-site .ip ::placeholder { opacity: 1; }

/* ------------------------------------------------------------------ Contenedores de Elementor
   `ip-c` anula relleno y separacion por defecto; el layout lo dan las utilidades. */
html body.ip-site .ip-c {
  --padding-top: 0px; --padding-right: 0px; --padding-bottom: 0px; --padding-left: 0px;
  --row-gap: 0px; --column-gap: 0px; --gap: 0px;
  --width: auto;
}
/* Como en el original: los hijos de una grilla no se achican por debajo de su contenido minimo. */
html body.ip-site .ip-c.e-con,
html body.ip-site .ip-c > .elementor-widget { min-width: auto; }

/* ------------------------------------------------------------------ Widgets nativos: heredan del wrapper */
html body.ip-site .ip-t .elementor-heading-title,
html body.ip-site .ip-t.elementor-widget-text-editor,
html body.ip-site .ip-t.elementor-widget-text-editor p {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: inherit;
  margin: 0;
}
html body.ip-site .ip-t .elementor-heading-title,
html body.ip-site .ip-eyebrow .elementor-heading-title,
html body.ip-site .ip-t.elementor-widget-text-editor :is(p, li) { text-wrap: wrap; overflow-wrap: normal; hyphens: manual; text-transform: none; }
html body.ip-site .ip-t.elementor-widget-text-editor p + p { margin-top: 0.75em; }
html body.ip-site .ip-t .elementor-heading-title strong { font-weight: 800; }

/* Imagen nativa que llena su wrapper (el wrapper lleva la proporcion: aspect-[5/6], etc.) */
html body.ip-site .ip-img,
html body.ip-site .ip-img .elementor-widget-container { display: block; }
html body.ip-site .ip-img .elementor-widget-container { height: 100%; }
html body.ip-site .ip-img img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; border-radius: 0; }

/* ------------------------------------------------------------------ Boton nativo (ip-btn) */
html body.ip-site .ip-btn .elementor-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 3.25rem;
  padding: 0 1.75rem;
  border: 0;
  border-radius: 9999px;
  background-color: var(--lima);
  color: var(--petroleo);
  fill: var(--petroleo);
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.5;
  text-decoration: none;
  box-shadow: none;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
html body.ip-site .ip-btn .elementor-button:hover,
html body.ip-site .ip-btn .elementor-button:focus {
  background-color: var(--petroleo);
  color: var(--lima);
  box-shadow: inset 0 0 0 2px var(--lima), 0 10px 28px -12px var(--lima);
}
html body.ip-site .ip-btn .elementor-button:focus:not(:focus-visible):not(:hover) {
  background-color: var(--lima);
  color: var(--petroleo);
  box-shadow: none;
}
html body.ip-site .ip-btn .elementor-button:focus-visible { outline: 2px solid var(--petroleo); outline-offset: 2px; }
html body.ip-site .ip-btn .elementor-button:active { transform: scale(0.99); }
@media (min-width: 40rem) {
  html body.ip-site .ip-btn .elementor-button { width: auto; }
}

/* ------------------------------------------------------------------ Etiqueta superior (ip-eyebrow) */
html body.ip-site .ip-eyebrow .elementor-heading-title {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0.5rem 1.125rem;
  border: 1px solid var(--border);
  border-radius: 9999px;
  background-color: var(--claro);
  color: var(--suave);
  font-family: inherit;
  font-size: 0.975rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.025em;
}
html body.ip-site .ip-eyebrow .elementor-heading-title::before {
  content: "";
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  background-color: var(--lima);
}

/* Insignia de confirmacion sobre la etiqueta (paginas de gracias) */
html body.ip-site .ip-ok::before {
  content: "";
  display: block;
  width: 4rem;
  height: 4rem;
  margin: 0 auto 1.5rem;
  border-radius: 9999px;
  background: var(--lima) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23364542' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 1.75rem no-repeat;
  box-shadow: var(--shadow-flotante);
}

/* Subrayado tipo resaltador del titular */
html body.ip-site .ip-mark { position: relative; display: inline-block; z-index: 0; }
html body.ip-site .ip-mark::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0.375rem;
  z-index: -1;
  height: 0.75rem;
  border-radius: 9999px;
  background-color: color-mix(in oklab, var(--lima) 45%, transparent);
}
@media (min-width: 64rem) { html body.ip-site .ip-mark::after { height: 1rem; } }

/* ------------------------------------------------------------------ Decoraciones de seccion */
html body.ip-site .ip-hero > *,
html body.ip-site .ip-final > * { position: relative; z-index: 1; }
html body.ip-site .ip-hero::before,
html body.ip-site .ip-hero::after,
html body.ip-site .ip-final::after {
  content: "";
  display: block;
  position: absolute;
  pointer-events: none;
  border-radius: 9999px;
  z-index: 0;
  transition: none;
}
/* El disco va primero (::before) y el aro despues (::after) para que el aro quede encima, como en el original. */
html body.ip-site .ip-hero::before { top: -10rem; right: -8rem; left: auto; width: 520px; height: 520px; border: 0; background-color: var(--claro); }
html body.ip-site .ip-hero::after {
  top: 6rem; right: 33.333333%; left: auto; width: 10rem; height: 10rem;
  border: 1px solid color-mix(in oklab, var(--lima) 25%, transparent);
  background: none;
}
html body.ip-site .ip-final::after {
  bottom: -8rem; left: 50%; width: 420px; height: 420px; transform: translateX(-50%);
  border: 1px solid rgb(255 255 255 / 0.05);
}

/* ------------------------------------------------------------------ Listas con check dentro de texto editable */
html body.ip-site .ip-checks { list-style: none; margin-left: 0; margin-right: 0; padding: 0; }
html body.ip-site .ip-checks li {
  position: relative;
  padding-left: 2rem;
  font-size: 0.95rem;
  line-height: 1.375;
  color: var(--petroleo);
}
html body.ip-site .ip-checks li { min-height: 1.375rem; }
html body.ip-site .ip-checks.ip-checks--plain li { line-height: 1.5; }
html body.ip-site .ip-checks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.125rem;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 9999px;
  background: var(--lima) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23364542' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 0.75rem no-repeat;
}

html body.ip-site .ip-ticks { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; list-style: none; margin: 0; padding: 0; }
html body.ip-site .ip-ticks li {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  color: var(--petroleo);
}
html body.ip-site .ip-ticks li::before {
  content: "";
  flex: none;
  width: 1rem;
  height: 1rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2391b535' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Franja "Sin exclusividad obligatoria" */
html body.ip-site .ip-strip p {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin: 0;
  padding: 1rem 1.25rem;
  border: 1px solid color-mix(in oklab, var(--lima) 40%, transparent);
  border-radius: 20px;
  background-color: color-mix(in oklab, var(--lima) 10%, transparent);
  font-family: var(--font-sans);
  line-height: 1.5;
}
html body.ip-site .ip-pill-check {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  background-color: var(--lima);
  color: var(--petroleo);
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 600;
}
html body.ip-site .ip-pill-check::before {
  content: "";
  width: 0.875rem;
  height: 0.875rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23364542' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}
@media (min-width: 40rem) {
  html body.ip-site .ip-strip p { flex-direction: row; gap: 0.75rem; border-radius: 9999px; text-align: left; }
}

/* ------------------------------------------------------------------ Aparicion al hacer scroll */
html body.ip-site .ip-d-80 { transition-delay: 80ms !important; }
html body.ip-site .ip-d-90 { transition-delay: 90ms !important; }
html body.ip-site .ip-d-100 { transition-delay: 100ms !important; }
html body.ip-site .ip-d-120 { transition-delay: 120ms !important; }
/* Sin JS, o dentro del editor de Elementor, el contenido siempre se ve. */
html body.ip-site:not(.ip-js) .reveal,
html body.ip-site.elementor-editor-active .reveal { opacity: 1 !important; transform: none !important; }

/* ------------------------------------------------------------------ Animaciones ajenas (AOS)
   Algunos temas (p. ej. el de Hostinger) le agregan `data-aos` a todos los contenedores de Elementor:
   los ocultan y los desplazan 100px hasta que entran en pantalla. En las paginas del kit se anula,
   y los contenedores con `reveal` conservan la aparicion propia del diseno. */
html body.ip-site .ip-c[data-aos]:not(.reveal) {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}
html body.ip-site .ip-c[data-aos].reveal {
  opacity: 0 !important;
  transform: translateY(18px) !important;
  transition-property: opacity, transform !important;
  transition-duration: 0.7s !important;
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1) !important;
  transition-delay: 0s;
}
html body.ip-site .ip-c[data-aos].reveal[data-visible="true"],
html body.ip-site:not(.ip-js) .ip-c[data-aos].reveal,
html body.ip-site.elementor-editor-active .ip-c[data-aos].reveal {
  opacity: 1 !important;
  transform: none !important;
}
@media (prefers-reduced-motion: reduce) {
  html body.ip-site .ip-c[data-aos].reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ------------------------------------------------------------------ Header */
html body.ip-site.admin-bar .ip-header { top: 32px; }
@media (max-width: 782px) { html body.ip-site.admin-bar .ip-header { top: 46px; } }

/* ------------------------------------------------------------------ Pasos */
html body.ip-site .ip-steps__tab { color: var(--suave); }
html body.ip-site .ip-steps__tab:hover { background-color: color-mix(in oklab, var(--lima) 15%, transparent); color: var(--petroleo); }
html body.ip-site .ip-steps__tab[aria-selected="true"],
html body.ip-site .ip-steps__tab[aria-selected="true"]:hover { background-color: var(--lima); color: var(--petroleo); }
html body.ip-site .ip-steps__tab--pill { border-color: var(--border); }
html body.ip-site .ip-steps__tab--pill:hover,
html body.ip-site .ip-steps__tab--pill[aria-selected="true"] { border-color: var(--lima); }
html body.ip-site .ip-steps__line { background-color: var(--border); }
html body.ip-site .ip-steps__card.is-dark .ip-steps__tab:not([aria-selected="true"]) { color: rgb(255 255 255 / 0.6); }
html body.ip-site .ip-steps__card.is-dark .ip-steps__tab:not([aria-selected="true"]):hover { background-color: rgb(255 255 255 / 0.1); color: #fff; }
html body.ip-site .ip-steps__card.is-dark .ip-steps__line { background-color: rgb(255 255 255 / 0.2); }
html body.ip-site .ip-steps [role="tablist"]::-webkit-scrollbar { display: none; }

/* ------------------------------------------------------------------ Acordeones */
html body.ip-site .ip-acc__panel { grid-template-rows: 0fr; }
html body.ip-site .ip-acc__btn[aria-expanded="true"] + .ip-acc__panel,
html body.ip-site h3:has(> .ip-acc__btn[aria-expanded="true"]) + .ip-acc__panel { grid-template-rows: 1fr; }
html body.ip-site .ip-acc__btn[aria-expanded="true"] .ip-acc__chev { rotate: 180deg; }
html body.ip-site .ip-acc--oscuro .ip-acc__btn[aria-expanded="true"] .ip-acc__chev { color: var(--lima); }
html body.ip-site .ip-acc--oscuro .ip-acc__btn[aria-expanded="true"] .ip-acc__icon {
  border-color: var(--lima);
  background-color: color-mix(in oklab, var(--lima) 10%, transparent);
  color: var(--lima);
}
html body.ip-site .ip-acc--oscuro .ip-acc__btn[aria-expanded="true"] .ip-acc__title,
html body.ip-site .ip-acc--oscuro .ip-acc__btn[aria-expanded="true"]:hover .ip-acc__title { color: #fff; }
html body.ip-site .ip-acc--claro .ip-acc__btn[aria-expanded="true"] .ip-acc__chev { color: var(--oliva); }
html body.ip-site .ip-acc__panel > div { min-height: 0; }

/* ------------------------------------------------------------------ Formulario */
html body.ip-site .ip-chip:has(input:checked),
html body.ip-site .ip-chip.is-checked,
html body.ip-site .ip-chip.is-checked:hover {
  border-color: var(--lima);
  background-color: color-mix(in oklab, var(--lima) 15%, transparent);
  color: var(--petroleo);
  font-weight: 600;
}
html body.ip-site .ip input[aria-invalid="true"] { border-color: var(--destructive); }
html body.ip-site .ip [data-ip-form] input[type="text"],
html body.ip-site .ip [data-ip-form] input[type="tel"],
html body.ip-site .ip [data-ip-form] input[type="email"] { border-width: 1px; border-style: solid; box-shadow: none; }
html body.ip-site .ip [data-ip-form] input[type="text"]:focus,
html body.ip-site .ip [data-ip-form] input[type="tel"]:focus,
html body.ip-site .ip [data-ip-form] input[type="email"]:focus {
  border-color: var(--lima);
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--lima) 40%, transparent);
}
html body.ip-site .ip [data-ip-form].is-sending [data-ip-submit] { opacity: 0.7; pointer-events: none; }

/* ------------------------------------------------------------------ Video */
html body.ip-site .ip [data-ip-video] video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }