/* ============================================================
   CARTEL DE BÚSQUEDA  ──  ESTILOS  (VERTICAL 9:16 · 1080 x 1920)
   Tipografía Ubuntu jerarquizada por pesos (300/400/500/700).
   Foto encima del contenido · QR grande con CTA al fondo.
   Paleta accesible, contraste suave.
   ============================================================ */

:root{
  --fondo-pagina:  #e8e6df;
  --cartel-fondo:  #f5f3ec;
  --tinta:         #2f3b40;
  --tinta-suave:   #5b6a70;
  --acento:        #c11616;   /* rojo */
  --acento-2:      #b08968;
  --linea:         #cfcabb;
  --etiqueta:      #8a8576;

  --ancho:  1080;
  --alto:   1920;
  --escala: 1;          /* lo ajusta el script según la pantalla */

  --fuente: 'Ubuntu', system-ui, Arial, sans-serif;
}

*{ box-sizing:border-box; margin:0; padding:0; }

body{
  font-family:var(--fuente);
  font-weight:400;
  background:var(--fondo-pagina);
  color:var(--tinta);
  display:flex;
  justify-content:center;
  -webkit-font-smoothing:antialiased;
}

.escenario{
  padding:18px 14px 44px;
}
.acciones{ width:100%; margin-top:18px; }

/* ---------------- Barra de acciones (no se exporta) ---------------- */
.barra-acciones{
  display:flex;
  gap:12px;
  flex-direction: column;
  justify-content:center;
  width: 100%;
  .btnGroup{
    display:flex;
    width: 100%;
    gap:12px;
    flex-direction: row;
    justify-content:center;
    .accion{ flex:1; }
  }
  .principalbtn{
    display:flex;
    width:100%;
    .accion--destacada{ width: 100%; }
  }
}
.accion{
  width:100%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-family:var(--fuente);
  font-size:15px;
  font-weight:500;
  padding:13px 20px;
  border:1px solid var(--linea);
  border-radius:10px;
  background:#fff;
  color:var(--tinta);
  cursor:pointer;
  transition:transform .08s ease, background .15s ease;
}
.accion:hover{ background:#f0eee6; }
.accion:active{ transform:scale(.98); }
.accion--destacada{ background:var(--acento); color:#fff; border-color:var(--acento); font-weight:700; }
.accion--destacada:hover{ background:#a01212; }

/* ---------------- Contenedor que escala el lienzo ---------------- */
.cartel-wrap{
  width:calc(1080px * var(--escala));
  height:calc(1920px * var(--escala));
}

/* ============================ CARTEL (1080 x 1920) ============================ */
.cartel{
  width:1080px;
  height:1920px;
  transform:scale(var(--escala));
  transform-origin:top left;
  background:var(--cartel-fondo);
  border:6px solid var(--acento);
  border-radius:22px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  box-shadow:0 14px 46px rgba(47,59,64,.22);
}

/* --------- Encabezado --------- */
.cartel__header{
  position:relative;
  background:var(--acento);
  color:var(--cartel-fondo);
  text-align:center;
  padding:26px 24px;
  flex:0 0 auto;
}
.cartel__titulo{
  font-family:var(--fuente);
  font-weight:700;
  font-size:78px;
  line-height:1;
  letter-spacing:8px;
  text-transform:uppercase;
}

/* Mini botón circular de editar (lápiz) */
.btn-editar{
  position:absolute;
  top:50%;
  right:24px;
  transform:translateY(-50%);
  width:60px;
  height:60px;
  display:grid;
  place-items:center;
  border:none;
  border-radius:50%;
  background:#fff;
  color:var(--acento);
  cursor:pointer;
  box-shadow:0 2px 8px rgba(0,0,0,.25);
  transition:transform .1s ease, background .15s ease;
}
.btn-editar:hover{ background:#f3f0e9; }
.btn-editar:active{ transform:translateY(-50%) scale(.92); }
.btn-editar svg{ width:30px; height:30px; }

/* --------- Foto de la persona (ENCIMA), con lugar superpuesto --------- */
.foto-persona{
  position:relative;
  flex:0 0 750px;       /* alto fijo de la sección de la imagen */
  height:750px;
  overflow:hidden;      /* recorta la foto a la caja (igual en preview y export) */
}
.foto-persona > .foto-img{
  width:100%;
  height:100%;
  background-size:cover;            /* llena y recorta SIN deformar */
  background-position:center top;
  background-repeat:no-repeat;
  background-color:#ddd9cd;
}
.foto-lugar-inset{
  position:absolute;
  right:28px;
  bottom:28px;
  width:300px;
}
.foto-lugar-inset .foto-img{
  width:100%;
  height:210px;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  border-radius:14px;
  border:5px solid #fff;
  box-shadow:0 6px 22px rgba(0,0,0,.42);
  background-color:#ddd9cd;
}
.foto-lugar-inset figcaption{
  position:absolute;
  left:0; right:0; bottom:0;
  background:rgba(47,59,64,.84);
  color:#fff;
  font-weight:500;
  font-size:26px;
  letter-spacing:.5px;
  text-transform:uppercase;
  text-align:center;
  padding:6px 8px;
  border-radius:0 0 9px 9px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* --------- Datos --------- */
.datos{
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:20px;
  padding:26px 50px;
  min-height:0;
  overflow:hidden;        /* la sección de datos nunca invade la foto ni el contacto */
}
.datos__nombre{
  font-family:var(--fuente);
  font-weight:700;
  font-size:56px;
  line-height:1.02;
  letter-spacing:.5px;
  text-transform:uppercase;
  color:var(--tinta);
}

/* Bloques destacados: EDIFICIO / PARROQUIA / EDAD */
.datos__destacados{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:16px;
}
.bloque{
  background:#fff;
  border:1px solid var(--linea);
  border-left:6px solid var(--acento);
  border-radius:14px;
  padding:14px 18px;
  display:flex;
  flex-direction:column;
  gap:5px;
  min-width:0;
}
.bloque .etq{
  font-weight:500;
  font-size:20px;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:var(--etiqueta);
}
.bloque .val{
  font-weight:700;
  font-size:38px;
  line-height:1;
  text-transform:uppercase;
  color:var(--tinta);
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Última residencia (los demás campos en una sola fila) */
.datos__bloque-residencia{ display:flex; flex-direction:column; gap:14px; }
.datos__seccion{
  font-weight:700;
  font-size:28px;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--acento-2);
  padding-top:12px;
  border-top:2px solid var(--linea);
}
.datos__fila-unica{
  display:flex;
  flex-wrap:wrap;
  gap:10px 30px;
  font-weight:400;
  font-size:30px;
  letter-spacing:.3px;
  text-transform:uppercase;
  color:var(--tinta);
}
.datos__fila-unica b{ color:var(--etiqueta); font-weight:500; }

/* --------- Contacto --------- */
.cartel__contacto{
  flex:0 0 auto;
  background:var(--acento-2);
  color:#fff;
  padding:22px 50px 26px;
}
.cartel__pie{
  font-weight:700;
  font-size:32px;
  letter-spacing:1px;
  text-transform:uppercase;
  text-align:center;
  margin-bottom:14px;
}
.contacto-datos{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:12px 24px;
  align-items:start;
}
.cd-item{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.cd-item .etq{
  font-weight:500;
  font-size:20px;
  letter-spacing:1px;
  text-transform:uppercase;
  color:#f1e4d8;
}
.cd-val{
  font-weight:400;
  font-size:32px;
  line-height:1.05;
  letter-spacing:.3px;
  word-break:break-word;
}
.cd-item--tel .cd-val{ font-weight:700; font-size:40px; }

/* --------- QR + Llamado a la acción (al fondo, grande) --------- */
.cartel__cta{
  flex:0 0 auto;
  background:var(--acento);
  color:#fff;
  display:flex;
  align-items:center;
  gap:30px;
  padding:28px 50px;
}
.cartel__cta .qr{ 
  flex:0 0 30%;        /* el QR ocupa ~48% del footer */
  max-width:30%;
  display:grid;
  place-items:center;
  background:#fff;    
  border-radius:18px;
  padding:18px;
}
.cartel__cta .qr #qrcode{ width:100%; line-height:0; }
.cartel__cta .qr #qrcode img,
.cartel__cta .qr #qrcode canvas{
  display:block;
  width:100% !important;
  height:auto !important;
}
.cta-texto{
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  gap:8px;
  min-width:0;
}
.cta-accion{
  font-weight:700;
  font-size:46px;
  line-height:1.04;
  letter-spacing:1px;
  text-transform:uppercase;
}
.cta-detalle{
  font-weight:300;
  font-size:28px;
  line-height:1.25;
  color:#ffe9e9;
}