/* ==========================================================
   Piezas compartidas por leoncorkidi.com y servicios.leoncorkidi.com
   Se carga después de styles.css. Usa sus mismas variables.
   ========================================================== */

/* ---------- fondos de encabezado a todo el ancho ---------- */
.p-hero::before {
  inset: 0 auto 0 50%;
  width: 100vw;
  transform: translateX(-50%);
}

/* ---------- botones (también en el sitio principal) ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-mono);
  font-size: 16px;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 16px 26px;
  border: 1px solid var(--line-2);
  color: var(--text);
  background: transparent;
  cursor: pointer;
  transition: border-color .3s, background .3s, color .3s;
}
.btn:hover { border-color: var(--red); background: var(--red-deep); color: #fff; }
.btn-hire { background: var(--red); border-color: var(--red); color: #fff; }
.btn-hire:hover { background: var(--red-glow); border-color: var(--red-glow); }
.btn:focus-visible, .lc-cookie-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* ---------- puntero lápiz ---------- */
.lc-lapiz-on, .lc-lapiz-on * { cursor: none !important; }
.lc-lapiz-on input:not([type="checkbox"]):not([type="radio"]),
.lc-lapiz-on textarea { cursor: text !important; }
.lc-lapiz {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 2147483000;
  width: 30px;
  height: 30px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s;
  will-change: transform;
}
.lc-lapiz.visible { opacity: 1; }
.lc-lapiz.texto { opacity: 0; }
.lc-lapiz svg { display: block; transform-origin: 1.5px 1.5px; transition: transform .2s ease; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .6)); }
.lc-lapiz.activo svg { transform: rotate(-12deg) scale(1.12); }
.lc-lapiz.presion svg { transform: scale(.9); }
.lc-halo {
  position: fixed;
  z-index: 2147482999;
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 50%;
  pointer-events: none;
  animation: lc-radar .7s ease-out forwards;
}
@keyframes lc-radar {
  from { transform: scale(.2); opacity: .9; }
  to   { transform: scale(1.6); opacity: 0; }
}

/* ---------- trazo rojo al pasar el cursor ---------- */
.lc-trazo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 2;
}
.lc-trazo rect, .lc-trazo line {
  fill: none;
  stroke: var(--red-glow);
  stroke-width: 2;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset .8s cubic-bezier(.6, .05, .3, 1);
}
*:hover > .lc-trazo rect,
*:hover > .lc-trazo line,
*:focus-visible > .lc-trazo rect { stroke-dashoffset: 0; }
.faq details:hover summary > .lc-trazo line { stroke-dashoffset: 0; }

/* ---------- pie unificado ---------- */
.footer-legal { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; }
.footer a:hover, .footer button:hover { color: #fff; }
.footer-legal button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  letter-spacing: inherit;
  text-transform: inherit;
}
.footer .made-by strong { font-weight: 500; color: #f1edea; }

/* ---------- consentimiento de cookies ---------- */
.lc-cookies {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 1000;
  width: min(460px, calc(100vw - 32px));
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  padding: 22px;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-top: 2px solid var(--red);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .55);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .3s ease, transform .3s ease;
}
.lc-cookies.visible { opacity: 1; transform: none; }
.lc-cookies-icono { color: #f1edea; padding-top: 2px; }
.lc-cookies-icono svg { width: 30px; height: 30px; }
.lc-cookies-titulo {
  font-family: var(--f-display);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: 22px;
  color: #f1edea;
  margin-bottom: 6px;
}
.lc-cookies p, .lc-cookies-panel p { font-size: 15px; line-height: 1.6; color: #a7a09d; }
.lc-cookies a, .lc-cookies-panel a { color: #f1edea; border-bottom: 1px solid var(--red-glow); }
.lc-cookies-gpc { margin-top: 8px; color: #d6d2cf !important; }
.lc-cookies-acciones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.lc-cookies-acciones .btn { padding: 11px 16px; font-size: 13px; }

.lc-cookies-panel {
  margin: auto;
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  overflow: auto;
  position: relative;
  border: 1px solid var(--line-2);
  border-top: 2px solid var(--red);
  background: var(--bg-2);
  color: var(--text);
  padding: clamp(24px, 5vw, 40px);
}
.lc-cookies-panel::backdrop { background: rgba(0, 0, 0, .78); }
.lc-cookies-panel h2 {
  font-family: var(--f-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .03em;
  font-size: clamp(26px, 4vw, 32px);
  color: #f1edea;
  margin-bottom: 10px;
  padding-right: 40px;
}
.lc-cookies-panel .hire-close {
  position: absolute; top: 14px; right: 14px; width: 40px; height: 40px;
  border: 0; background: none; color: var(--text); font-size: 28px; cursor: pointer;
}
.lc-pref {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: flex-start;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}
.lc-pref:first-of-type { margin-top: 18px; border-top: 1px solid var(--line-2); }
.lc-pref label {
  font-family: var(--f-mono);
  font-size: 14px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #f1edea;
}
.lc-pref p { margin-top: 4px; }
.lc-pref input {
  appearance: none;
  flex: none;
  width: 46px;
  height: 26px;
  margin-top: 2px;
  border-radius: 13px;
  background: var(--line-2);
  position: relative;
  transition: background .25s;
}
.lc-pref input::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #d6d2cf;
  transition: transform .25s;
}
.lc-pref input:checked { background: var(--red); }
.lc-pref input:checked::after { transform: translateX(20px); background: #fff; }
.lc-pref input:disabled { opacity: .6; }
.lc-pref input:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.lc-cookies-link { margin-top: 18px; }
.lc-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.lc-cookie-btn {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 900;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  background: var(--bg-2);
  color: #d6d2cf;
  cursor: pointer;
  transition: color .3s, border-color .3s;
}
.lc-cookie-btn:hover { color: #fff; border-color: var(--red); }
.lc-cookie-btn .lc-trazo rect { rx: 23px; }

/* ---------- casilla de autorización del formulario ---------- */
.hire-check { display: flex; gap: 12px; align-items: flex-start; margin-top: 18px; font-size: 14px; line-height: 1.5; color: #a7a09d; }
.hire-check input { flex: none; width: 18px; height: 18px; margin-top: 2px; accent-color: var(--red); }
.hire-check a { color: #f1edea; border-bottom: 1px solid var(--red-glow); }

@media (max-width: 480px) {
  .lc-cookies { grid-template-columns: 1fr; left: 8px; bottom: 8px; width: calc(100vw - 16px); }
  .lc-cookies-icono { display: none; }
  .lc-cookie-btn { left: 10px; bottom: 10px; width: 42px; height: 42px; }
}
@media (prefers-reduced-motion: reduce) {
  .lc-cookies { transition: none; }
  .lc-trazo rect, .lc-trazo line { transition-duration: .01s; }
}

/* ---------- páginas legales ---------- */
.p-text.legal { max-width: 780px; }
.legal p strong { color: #f1edea; }
.legal a, .p-intro a { color: #f1edea; border-bottom: 1px solid var(--red-glow); transition: color .3s; }
.legal a:hover, .p-intro a:hover { color: #fff; }

/* el botón flotante de cookies no tapa el pie */
@media (min-width: 861px) { .footer { padding-bottom: 84px; } }

/* ---------- contenedor: un solo token que crece con la pantalla ----------
   1120 px hasta 1555 px de ventana, 72 % de la ventana después y tope de 1600 px.
   Los textos largos conservan su propio ancho de lectura (.p-intro, .p-text). */
:root { --max: clamp(1120px, 72vw, 1600px); }

/* ---------- capa superior del lápiz (popover) ---------- */
.lc-capa {
  position: fixed;
  inset: 0;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
  pointer-events: none;
  z-index: 2147483000;
}
.lc-capa[popover]:not(:popover-open) { display: none; }

/* ---------- chat de WhatsApp al pasar el cursor (con el sistema del sitio) ---------- */
.lc-wa-chat .wa-label { display: none; }
.lc-chat {
  position: absolute;
  right: 0;
  bottom: calc(100% + 16px);
  width: 290px;
  display: block;
  text-align: left;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-top: 2px solid var(--red);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .65);
  opacity: 0;
  transform: translateY(10px);
  transform-origin: 100% 100%;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
  font-family: var(--f-body);
  text-transform: none;
  letter-spacing: 0;
}
.lc-chat.abierto { opacity: 1; transform: none; }
.lc-chat-cab { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.lc-chat-avatar {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border: 1px solid var(--line-2);
  background: var(--bg);
  font-family: var(--f-display); font-weight: 500; font-size: 14px; letter-spacing: .04em; color: #f1edea;
}
.lc-chat-cab b {
  display: block;
  font-family: var(--f-display); font-weight: 400; font-size: 18px;
  text-transform: uppercase; letter-spacing: .04em; color: #f1edea; line-height: 1.1;
}
.lc-chat-cab small {
  display: flex; align-items: center; gap: 6px; margin-top: 3px;
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}
.lc-chat-cab small::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--red-glow); box-shadow: 0 0 0 3px rgba(179, 22, 29, .25); }
.lc-chat-cuerpo { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 16px 16px 6px; min-height: 56px; }
.lc-chat-msg {
  position: relative;
  max-width: 92%;
  padding: 9px 13px;
  background: var(--bg);
  border: 1px solid var(--line-2);
  border-left: 2px solid var(--red-glow);
  color: #ece8e5;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.45;
  animation: lc-burbuja .25s ease-out;
}
.lc-chat-escribe { display: inline-flex; gap: 5px; padding: 12px 13px; background: var(--bg); border: 1px solid var(--line-2); }
.lc-chat-escribe i { width: 5px; height: 5px; background: var(--muted); animation: lc-puntos 1s infinite ease-in-out; }
.lc-chat-escribe i:nth-child(2) { animation-delay: .15s; }
.lc-chat-escribe i:nth-child(3) { animation-delay: .3s; }
.lc-chat-cta {
  display: block;
  padding: 6px 16px 14px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--red-glow);
  opacity: 0;
  transition: opacity .3s;
}
.lc-chat-cta::after { content: " →"; }
.lc-chat.fin .lc-chat-cta { opacity: 1; }
@keyframes lc-burbuja { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes lc-puntos { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-4px); opacity: 1; background: var(--red-glow); } }
@media (prefers-reduced-motion: reduce) {
  .lc-chat, .lc-chat-msg, .lc-chat-escribe i { transition: none; animation: none; }
}

/* ---------- tinta roja al mantener presionado ---------- */
.lc-tinta { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; transition: opacity 1.2s ease; }
.lc-tinta.desvanece { opacity: 0; }
.lc-rayando, .lc-rayando * { user-select: none !important; -webkit-user-select: none !important; }