/* =====================================================================
   Jesús & Amelia — hoja de estilos
   Paleta construida a partir de la ilustración:
   marfil de la Alhambra, tinta cálida, terracota de la Torre Eiffel.
   Todo va con prefijo "ja-" y anidado bajo .ja-page para que pueda
   convivir con el CSS de un tema de WordPress sin pisarse.
   ===================================================================== */

.ja-page {
  /* Color */
  --bg:        #F5EFE4;   /* marfil cálido de fondo */
  --bg-deep:   #EDE4D4;   /* halo tras la ilustración */
  --ink:       #2A231E;   /* texto principal (negro cálido) */
  --ink-soft:  #6F6459;   /* texto secundario */
  --accent:    #B5573E;   /* terracota: acentos y foco */
  --paper:     #FBF8F2;   /* blanco roto para textos sobre tinta */
  --card-bg:   #D8CDBC;   /* color de espera mientras carga la foto */

  /* Tipografía */
  --font-script: "Clicker Script", "Brush Script MT", cursive;
  --font-serif:  "Cormorant Garamond", "Cormorant", Garamond, "Times New Roman", serif;
  --font-ui:     "Jost", "Helvetica Neue", Arial, sans-serif;

  /* Geometría */
  --radius: 20px;
  --gutter: clamp(18px, 5vw, 32px);
  --max: 1080px;
}

/* ---------- Base (solo dentro de la página) ---------- */
html.ja-html { background: #F5EFE4; -webkit-text-size-adjust: 100%; }
body.ja-body { margin: 0; background: #F5EFE4; }

.ja-page, .ja-page *, .ja-page *::before, .ja-page *::after { box-sizing: border-box; }
.ja-page {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  width: 100%;
  padding: 0 var(--gutter) calc(28px + env(safe-area-inset-bottom));
}
.ja-page__inner { max-width: var(--max); margin: 0 auto; }
.ja-page img { display: block; max-width: 100%; height: auto; border: 0; box-shadow: none; }
.ja-page a { color: inherit; text-decoration: none; }
.ja-page h1, .ja-page h2, .ja-page h3, .ja-page p, .ja-page figure { margin: 0; padding: 0; }

/* ---------- Aparición muy ligera al cargar ---------- */
.ja-hero__text, .ja-hero__art, .ja-hero__copy, .ja-question, .ja-card, .ja-mission, .ja-foot {
  opacity: 0;
  transform: translateY(8px);
  animation: ja-rise .6s cubic-bezier(.2,.7,.2,1) forwards;
}
.ja-hero__art  { animation-delay: .05s; }
.ja-hero__copy { animation-delay: .12s; }
.ja-question   { animation-delay: .18s; }
.ja-card       { animation-delay: calc(.22s + var(--i, 0) * .05s); }
.ja-mission    { animation-delay: .42s; }
.ja-foot       { animation-delay: .5s; }
@keyframes ja-rise { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .ja-hero__text, .ja-hero__art, .ja-hero__copy, .ja-question, .ja-card, .ja-mission, .ja-foot {
    animation: none; opacity: 1; transform: none;
  }
  .ja-card__img, .ja-card, .ja-mission { transition: none !important; }
}

/* =====================================================================
   HERO
   ===================================================================== */
.ja-hero {
  text-align: center;
  padding-top: calc(28px + env(safe-area-inset-top));
}

.ja-page .ja-names {
  font-family: var(--font-script);
  font-weight: 400;
  font-size: clamp(46px, 13.5vw, 72px);
  line-height: 1;
  letter-spacing: .01em;
  color: var(--ink);
  position: relative;
  z-index: 1;
}
.ja-page .ja-date {
  margin-top: 6px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.ja-page .ja-date[hidden] { display: none; }

/* La ilustración se apoya sobre un halo cálido y su base se funde con
   el fondo, para que no lea como un rectángulo pegado.                 */
.ja-hero__art {
  position: relative;
  margin: -7% auto 0;          /* los nombres se asientan en el cielo del dibujo */
  width: min(100%, 560px);
}
.ja-hero__art::before {
  content: "";
  position: absolute;
  inset: 10% -6% 6%;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--bg-deep), transparent 78%);
  z-index: -1;
}
.ja-page .ja-hero__art img {
  width: 100%;
  aspect-ratio: 1400 / 1010;
  -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 82%, transparent 100%);
}

.ja-hero__copy {
  max-width: 420px;
  margin: -6px auto 0;
}
.ja-page .ja-title {
  font-family: var(--font-serif);
  font-size: clamp(37px, 9.8vw, 52px);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -.01em;
  color: var(--ink);
  text-wrap: balance;
}
.ja-page .ja-title em {
  font-style: italic;
  font-weight: 600;
  color: var(--accent);
}
.ja-page .ja-lead[hidden] { display: none; }
.ja-page .ja-lead {
  margin-top: 12px;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--ink-soft);
  text-wrap: pretty;
}

/* =====================================================================
   ÁLBUMES
   ===================================================================== */
.ja-albums { margin-top: 30px; }

.ja-page .ja-question {
  font-family: var(--font-ui);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-align: center;
  margin-bottom: 14px;
}

.ja-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* Tarjeta = portada fotográfica. Toda la superficie es el enlace.     */
.ja-page .ja-card {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--card-bg);
  text-decoration: none;
  color: #fff;
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
  transform: translateZ(0);
  transition: transform .18s ease;
}
/* Fondos tonales cuando todavía no hay fotografía asignada */
.ja-page .ja-card--claro  { background: linear-gradient(170deg, #E9DFCB, #A8907A); }
.ja-page .ja-card--dorado { background: linear-gradient(170deg, #D9C79A, #7A7549); }
.ja-page .ja-card--calido { background: linear-gradient(170deg, #D2947A, #7A4535); }
.ja-page .ja-card--noche  { background: linear-gradient(170deg, #5A4560, #1E1826); }

.ja-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .9s cubic-bezier(.2,.7,.2,1), filter .3s ease;
}
/* Degradado inferior muy sutil para la legibilidad del texto */
.ja-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    rgba(22,16,12,.72) 0%,
    rgba(22,16,12,.34) 34%,
    rgba(22,16,12,0)   62%);
  pointer-events: none;
}
.ja-card__body {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 1;
  padding: 14px 15px 15px;
}
.ja-page .ja-card__name {
  font-family: var(--font-ui);
  font-size: clamp(17px, 4.8vw, 22px);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 1px 12px rgba(0,0,0,.25);
}
.ja-card__action {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 5px;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .06em;
  color: rgba(255,255,255,.82);
}
.ja-card__action svg { opacity: .8; }

/* Estados: feedback discreto */
.ja-page .ja-card:active { transform: scale(.975); }
.ja-card:active .ja-card__img { filter: brightness(.94); }
@media (hover: hover) {
  .ja-card:hover .ja-card__img { transform: scale(1.04); }
}
.ja-page .ja-card:focus-visible,
.ja-page .ja-mission:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

/* Sin JavaScript: enlaces planos legibles */
.ja-page .ja-card--plain {
  aspect-ratio: auto;
  padding: 22px;
  color: var(--ink);
  background: var(--bg-deep);
}
.ja-card--plain::after { display: none; }

/* =====================================================================
   MISIÓN ESPECIAL
   Mismo radio y ritmo que las tarjetas, pero en tinta y con la caligrafía
   de la identidad: se percibe distinto sin romper el lenguaje.
   ===================================================================== */
.ja-mission-wrap { margin-top: 10px; }

.ja-page .ja-mission {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "mark text"
    "cta  cta";
  column-gap: 14px;
  row-gap: 16px;
  align-items: start;
  padding: 22px 22px 20px;
  border-radius: var(--radius);
  background: var(--ink);
  color: var(--paper);
  text-decoration: none;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  transition: transform .18s ease, background-color .3s ease;
}
/* Luz muy leve en una esquina: sensación de papel, no de botón */
.ja-mission::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 100% 0%, rgba(181,87,62,.16), transparent 55%);
  pointer-events: none;
}
.ja-mission > * { position: relative; }
.ja-mission__mark {
  grid-area: mark;
  color: #E3B49F;
  margin-top: 12px;
}
.ja-mission__text { grid-area: text; display: block; }
.ja-page .ja-mission__title {
  display: block;
  font-family: var(--font-script);
  font-weight: 400;
  font-size: clamp(38px, 10.5vw, 52px);
  line-height: 1;
  color: var(--paper);
}
.ja-mission__desc {
  display: block;
  margin-top: 6px;
  font-size: 14.5px;
  line-height: 1.5;
  color: rgba(251,248,242,.78);
  max-width: 36ch;
}
.ja-mission__cta {
  grid-area: cta;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding-bottom: 3px;
  border-bottom: 1px solid rgba(251,248,242,.35);
  transition: border-color .25s ease;
}
.ja-page .ja-mission:active { transform: scale(.985); }
@media (hover: hover) {
  .ja-page .ja-mission:hover { background: #33291F; }
  .ja-mission:hover .ja-mission__cta { border-color: rgba(251,248,242,.85); }
}

/* Variante con fotografía: la foto llena la tarjeta, el texto se apoya
   en un degradado de tinta en la parte inferior, como en los álbumes.   */
.ja-mission__media[hidden] { display: none; }
.ja-page .ja-mission--photo {
  display: block;
  padding: 0;
  aspect-ratio: 1 / 1;
  background: var(--ink);
  isolation: isolate;
}
.ja-mission--photo .ja-mission__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.ja-page .ja-mission__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 18%;
  transition: transform .9s cubic-bezier(.2,.7,.2,1);
}
.ja-mission--photo::before {
  z-index: 1;
  background: linear-gradient(to top,
    rgba(22,16,12,.92) 0%,
    rgba(22,16,12,.72) 30%,
    rgba(22,16,12,.25) 55%,
    rgba(22,16,12,0)   75%);
}
.ja-mission--photo .ja-mission__mark {
  position: absolute;
  top: 18px; left: 20px;
  z-index: 2;
  margin: 0;
}
.ja-mission--photo .ja-mission__text {
  position: absolute;
  left: 22px; right: 22px; bottom: 66px;
  z-index: 2;
}
.ja-mission--photo .ja-mission__desc { max-width: 34ch; color: rgba(251,248,242,.85); }
.ja-mission--photo .ja-mission__cta {
  position: absolute;
  right: 22px; bottom: 20px;
  z-index: 2;
}
@media (hover: hover) {
  .ja-page .ja-mission--photo:hover { background: var(--ink); }
  .ja-mission--photo:hover .ja-mission__img { transform: scale(1.03); }
}

/* =====================================================================
   CIERRE
   ===================================================================== */
.ja-foot {
  margin-top: 46px;
  text-align: center;
  color: var(--ink-soft);
}
.ja-foot__line {
  font-size: 12.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.ja-page .ja-foot__names {
  margin-top: 4px;
  font-family: var(--font-script);
  font-size: 30px;
  line-height: 1;
  color: var(--ink);
}

/* =====================================================================
   PANTALLAS ANCHAS (tablet / escritorio): la composición se reorganiza
   en vez de estirarse.
   ===================================================================== */
@media (min-width: 720px) {
  .ja-page { padding-top: 24px; }

  .ja-hero {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    grid-template-areas:
      "text art"
      "copy art";
    align-items: center;
    column-gap: 40px;
    text-align: left;
    padding-top: 36px;
  }
  .ja-hero__text { grid-area: text; align-self: end; }
  .ja-hero__copy { grid-area: copy; align-self: start; margin: 14px 0 0; max-width: 480px; }
  .ja-hero__art  { grid-area: art; margin: 0; width: 100%; }
  .ja-page .ja-hero__art img {
    -webkit-mask-image: none;
            mask-image: none;
  }

  .ja-page .ja-names { font-size: clamp(64px, 7vw, 88px); }
  .ja-page .ja-title { font-size: clamp(44px, 4.6vw, 58px); }
  .ja-page .ja-lead  { font-size: 17px; }

  .ja-albums { margin-top: 56px; }
  .ja-page .ja-question { text-align: left; }
  .ja-grid { grid-template-columns: repeat(4, 1fr); gap: 14px; }
  .ja-page .ja-card { aspect-ratio: 3 / 4; }
  .ja-card__body { padding: 20px 20px 22px; }
  .ja-page .ja-card__name { font-size: 20px; }

  .ja-mission-wrap { margin-top: 14px; }
  .ja-page .ja-mission {
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "mark text cta";
    align-items: center;
    padding: 28px 32px;
    column-gap: 22px;
  }
  .ja-mission__mark { margin-top: 0; }
  .ja-page .ja-mission__title { font-size: 48px; }
  .ja-mission__desc { max-width: none; }

  .ja-page .ja-mission--photo { aspect-ratio: 21 / 9; min-height: 340px; }
  .ja-page .ja-mission--photo .ja-mission__img { object-position: 50% 22%; }
  .ja-mission--photo .ja-mission__text { left: 32px; bottom: 32px; right: 260px; }
  .ja-mission--photo .ja-mission__desc { max-width: 44ch; }
  .ja-mission--photo .ja-mission__cta { right: 32px; bottom: 36px; }
  .ja-mission--photo .ja-mission__mark { top: 24px; left: 32px; }
  .ja-mission--photo::before {
    background: linear-gradient(to top,
      rgba(22,16,12,.9) 0%, rgba(22,16,12,.6) 35%, rgba(22,16,12,.15) 60%, rgba(22,16,12,0) 80%);
  }

  .ja-foot { margin-top: 64px; }
}

@media (min-width: 1000px) {
  .ja-hero { column-gap: 64px; }
  .ja-page .ja-card__name { font-size: 22px; }
}