/* =========================================================================
   Remote Revenue - Capa "Caricatura" (estilo Odoo, adaptado a marca)
   EN PRODUCCION sobre index.html y en/index.html (aplicado 2026-07-19).
   Se SUPERPONE a styles.css (se carga despues). No modifica el sistema
   "Editorial Luxe": solo lo reviste con acentos ilustrados.

   Filosofia:
   - Se MANTIENE la fuente original (Fraunces) en los titulares.
   - La fuente manuscrita (Caveat, mas fina/suave) se usa SOLO en la palabra
     o frase destacada, para dar impacto visual sin saturar.
   - Resaltados de marcador sutiles, de bordes redondeados y con contraste
     real (ambar sobre papel + tinta oscura encima).
   - Numeros de paso en circulo dibujado, pincelada + bocadillo en el
     fundador, y notas/flechas manuscritas que apuntan al boton.
   ========================================================================= */

/* ---------- Fuente manuscrita (self-hosted, latin) ---------- */
@font-face {
  font-family: "Caveat";
  src: url("../fonts/caveat.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-hand: "Caveat", "Segoe Script", "Comic Sans MS", cursive;

  /* Marcador ambar de bordes redondeados (semitransparente = mas sutil) */
  --mk-amber: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 64' preserveAspectRatio='none'%3E%3Cpath d='M22,7 L198,9 Q212,9 213,23 L214,41 Q213,56 199,56 L21,55 Q7,55 7,40 L6,23 Q7,8 22,7 Z' fill='%23e8a14c' fill-opacity='0.9'/%3E%3C/svg%3E");
  /* Subrayados a mano (trazo) */
  --ul-olive: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath d='M4,11 C 55,3 150,18 196,8' fill='none' stroke='%23586a2b' stroke-width='6' stroke-linecap='round'/%3E%3C/svg%3E");
  --ul-terra: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath d='M4,11 C 55,3 150,18 196,8' fill='none' stroke='%23c2502e' stroke-width='6' stroke-linecap='round'/%3E%3C/svg%3E");
  /* Circulo dibujado a mano (abierto) para numeros de paso */
  --circle-terra: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M53,9 C 82,10 93,34 90,56 C 87,81 62,92 41,90 C 17,88 8,62 12,41 C 16,19 33,10 55,10' fill='none' stroke='%23d98a5f' stroke-width='6' stroke-linecap='round'/%3E%3C/svg%3E");
  --circle-olive: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M53,9 C 82,10 93,34 90,56 C 87,81 62,92 41,90 C 17,88 8,62 12,41 C 16,19 33,10 55,10' fill='none' stroke='%23586a2b' stroke-width='6' stroke-linecap='round'/%3E%3C/svg%3E");
  /* Bocadillo con carita (relleno papel, contorno tinta) */
  --bubble: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 72'%3E%3Cpath d='M14,5 h52 a11,11 0 0 1 11,11 v26 a11,11 0 0 1 -11,11 h-28 l-15,13 l2,-13 h-11 a11,11 0 0 1 -11,-11 v-26 a11,11 0 0 1 11,-11 z' fill='%23fffdf9' stroke='%23241b12' stroke-width='4'/%3E%3Ccircle cx='31' cy='29' r='3.4' fill='%23241b12'/%3E%3Ccircle cx='51' cy='29' r='3.4' fill='%23241b12'/%3E%3Cpath d='M29,38 q11,10 22,0' fill='none' stroke='%23241b12' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* =========================================================================
   1) PALABRA/FRASE DESTACADA  (unico punto donde entra la manuscrita)
   Reviste el mecanismo .mesh-text existente: fuente manuscrita fina +
   marcador ambar sutil, redondeado y con buen contraste.
   box-decoration-break:clone -> cada linea recibe su propio trazo.
   ========================================================================= */
.mesh-text, .mesh-text.serif-it {
  font-family: var(--font-hand);
  font-weight: 700;
  font-style: normal;
  font-size: 1.12em;
  line-height: 0.9;
  color: var(--ink);
  -webkit-text-fill-color: var(--ink);
  background: var(--mk-amber);
  background-repeat: no-repeat;
  background-position: center 86%;
  background-size: 100% 74%;
  padding: 0 0.26em 0.04em;   /* margen extra a los lados: el marcador cubre signos finales (p.ej. ".") */
  animation: none;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Variante subrayado a mano (mas sutil): seccion "solucion" */
#solucion .mesh-text {
  background: var(--ul-olive);
  background-repeat: no-repeat;
  background-position: left 100%;
  background-size: 100% 0.34em;
  padding: 0 0.06em 0.14em;
}

/* Banner oscuro: titulo en papel, palabra clave con marcador ambar + tinta */
.pbanner__inner h2 { color: var(--paper); }
.pbanner .mesh-text { color: var(--ink); -webkit-text-fill-color: var(--ink); }

/* Resaltado dentro de la cita del fundador (subrayado terracota, sutil) */
.founder__quote .hl {
  font-style: normal;
  color: var(--ink);
  background: var(--ul-terra);
  background-repeat: no-repeat;
  background-position: left 100%;
  background-size: 100% 0.34em;
  padding: 0 0.05em 0.1em;
}

/* =========================================================================
   2) "EL PROBLEMA REAL": quitar rayo y guion decorativo del eyebrow
   ========================================================================= */
#problema .eyebrow::before { display: none; }   /* la linea antes del label */
#problema .eyebrow { padding-left: 0; }

/* =========================================================================
   3) NUMEROS DE PASO EN CIRCULO DIBUJADO A MANO  (referencia style2)
   El numero si usa la manuscrita: va dentro de un doodle, encaja.
   ========================================================================= */
.step__n {
  font-family: var(--font-hand);
  font-weight: 700;
  -webkit-text-fill-color: var(--ink);
  color: var(--ink);
  background: var(--circle-terra) center / 100% 100% no-repeat;
  width: clamp(60px, 7.5vw, 80px);
  height: clamp(60px, 7.5vw, 80px);
  display: grid;
  place-items: center;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  line-height: 1;
  letter-spacing: 0;
  transform: rotate(-3deg);
  animation: none;
  margin-bottom: 8px;
}
.flip:nth-child(even) .step__n { background-image: var(--circle-olive); transform: rotate(2deg); }

/* =========================================================================
   4) FUNDADOR: pincelada + bocadillo tras la foto  (referencia style6)
   ========================================================================= */
.founder__media::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -14%;
  bottom: -8%;
  width: 76%;
  height: 44%;
  background: var(--mk-amber);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  transform: rotate(-8deg);
  animation: none;
  border-radius: 0;
}
.founder__media::after {
  content: "";
  position: absolute;
  z-index: 4;
  top: -20px;
  right: -12px;
  width: 60px;
  height: 54px;
  background: var(--bubble) center / contain no-repeat;
  transform: rotate(6deg);
  animation: none;
  border-radius: 0;
  box-shadow: none;
  filter: drop-shadow(0 6px 10px rgba(63, 45, 25, 0.18));
}

/* =========================================================================
   5) NOTAS Y FLECHAS MANUSCRITAS  (referencia style5)
   Apuntan SIEMPRE al boton. Elementos .hand-note se anaden en el HTML.
   ========================================================================= */
.hand-note {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--clay);
  pointer-events: none;
}
.hand-note__txt {
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: 1.3rem;
  line-height: 1.05;
  transform: rotate(-4deg);
  color: inherit;
  white-space: nowrap;
}
.hand-arrow { width: 78px; height: auto; color: inherit; flex: none; }

/* Hero: nota bajo el CTA */
.hand-note--hero { margin-top: 16px; margin-left: 4px; }

/* Banner: boton + nota en una fila, flecha apuntando al boton */
.pbanner__cta-row {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 32px;
}
.pbanner__cta-row .btn { margin-top: 0; }
.pbanner .hand-note { color: var(--amber); }
.pbanner .hand-arrow { width: 68px; }

/* =========================================================================
   6) BOTONES / EYEBROWS: se quedan con la fuente original (sin saturar)
   ========================================================================= */

/* =========================================================================
   7) MOVIL + REDUCED MOTION
   ========================================================================= */
@media (max-width: 720px) {
  .hand-note--hero { display: none; }
  .pbanner .hand-note { display: none; }   /* al envolver, la flecha apunta mal: se oculta */
  .founder__media::after { top: -14px; right: -6px; width: 46px; height: 42px; }
}
@media (prefers-reduced-motion: reduce) {
  .founder__media::before, .founder__media::after,
  .step__n, .mesh-text { animation: none; }
}