/* CV breve con el acabado de Divará: papel cálido, ciruela, títulos gruesos y cursiva serif.
   La misma página es el sitio (perfil.ingofilma.date) y el PDF: las reglas base son las de la hoja
   impresa y @media screen las vuelve fluidas para computadora y celular.
   scripts/generar-pdf.sh imprime esta página en CV_Arturo_Miruelo_breve.pdf. */
@font-face { font-family: "Inter"; src: url("fuentes/inter-v20-latin.woff2") format("woff2"); font-weight: 400 800; }
:root {
  --ink-950: #0a0a0a; --ink-800: #1f1f1f; --ink-700: #333; --ink-600: #4d4d4d; --ink-500: #6b6b6b;
  --ink-150: #e4e4e4; --papel: #fff; --fondo: #faf8f5;
  --marca: #015797; --tinta: #071a45; --cielo: #31a1de; --azul-50: #eef6fd; --azul-100: #d9ecfa; --acento: #b08a3e;
  /* Azules tomados de la foto de perfil: vidrio (#015797), cielo (#31a1de) y la chamarra marino (#010a3c). */
  --display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", system-ui, sans-serif;
  --sans: "Inter", system-ui, sans-serif;
  --serif: "Cormorant Garamond", Georgia, serif;
  /* Sin sombras difuminadas: Chrome las rasteriza y Vista Previa o el iPhone las pintan como bloques grises. */
  --sombra: inset 0 0 0 1px var(--ink-150), 0 1.5pt 0 var(--ink-150);
}
@page { size: letter; margin: 0; }
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font: 400 11.5pt/1.5 var(--sans); color: var(--ink-950); background: var(--fondo);
  -webkit-font-smoothing: antialiased; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.hoja { width: 8.5in; height: 11in; padding: .5in .55in .45in; display: flex; flex-direction: column; gap: 12pt;
  background: var(--fondo); overflow: hidden; page-break-after: always; }
.hoja:last-child { page-break-after: auto; }
.hoja + .hoja { padding-top: .4in; gap: 10pt; }

.etiqueta { display: inline-flex; align-items: center; gap: 6pt; font: 700 8pt var(--sans); letter-spacing: .08em;
  text-transform: uppercase; color: var(--marca); }
.etiqueta::before { content: ""; width: 6pt; height: 6pt; border-radius: 50%; background: var(--acento); }
.serif { font-family: var(--serif); font-style: italic; font-weight: 600; letter-spacing: 0; }
h2 { font: 800 19pt/1 var(--display); letter-spacing: -.03em; }
h2 em { font-style: normal; color: var(--marca); }

/* Portada */
.portada { display: grid; grid-template-columns: 1fr 1.3in; gap: 22pt; align-items: center;
  padding: 20pt 20pt 20pt 26pt; border-radius: 22pt; background: var(--papel); box-shadow: var(--sombra); }
h1 { font: 800 38pt/.98 var(--display); letter-spacing: -.035em; margin: 10pt 0 8pt; }
h1 em { font-style: normal; color: var(--marca); }
.oficio { font-size: 14pt; font-weight: 600; color: var(--ink-800); }
.lema { font-size: 17pt; color: var(--marca); margin-top: 4pt; }
.foto { width: 1.3in; height: 1.55in; border-radius: 14pt; overflow: hidden; background: var(--azul-50); }
.foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; transform: scale(1.3); transform-origin: 52% 30%; }

.presentacion { font-size: 13pt; line-height: 1.55; color: var(--ink-800); padding: 0 4pt; }
.presentacion b { color: var(--ink-950); }

/* Cifras */
.cifras { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10pt; }
.cifra { padding: 14pt 14pt 12pt; border-radius: 18pt; background: linear-gradient(160deg, var(--papel), var(--azul-50)); box-shadow: var(--sombra); }
.cifra b { display: block; font: 800 28pt/1 var(--display); letter-spacing: -.03em; color: var(--marca); }
.cifra span { display: block; margin-top: 5pt; font-size: 10.5pt; line-height: 1.3; color: var(--ink-700); font-weight: 500; }

/* Trabajos */
.trabajos { display: grid; gap: 9pt; }
.trabajo { display: grid; grid-template-columns: 1.7in 1fr; gap: 16pt; padding: 13pt 18pt; border-radius: 18pt; background: var(--papel); box-shadow: var(--sombra); }
.trabajo__lugar { font: 800 13pt/1.15 var(--display); letter-spacing: -.02em; }
.trabajo__fecha { margin-top: 5pt; display: inline-block; padding: 2pt 8pt; border-radius: 99pt; background: var(--azul-50);
  color: var(--marca); font-size: 8.5pt; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.trabajo__puesto { font-weight: 700; font-size: 11.5pt; color: var(--marca); }
.trabajo p { color: var(--ink-700); font-size: 11.5pt; line-height: 1.45; margin-top: 2pt; }

/* Contacto */
.contacto { margin-top: auto; display: grid; grid-template-columns: 1fr auto; gap: 18pt; align-items: center;
  padding: 18pt 22pt; border-radius: 22pt; color: #fff;
  background: radial-gradient(130% 140% at 100% 0%, var(--cielo) 0%, var(--marca) 42%, var(--tinta) 100%); }
.contacto .serif { font-size: 20pt; line-height: 1.1; }
.contacto small { display: block; margin-top: 3pt; font-size: 10pt; color: rgb(255 255 255 / .78); }
.contacto ul { list-style: none; display: grid; gap: 5pt; }
.contacto li { display: flex; align-items: center; gap: 9pt; font-size: 12pt; font-weight: 600; }
.contacto li i { width: 22pt; height: 22pt; border-radius: 50%; display: grid; place-items: center; background: rgb(255 255 255 / .14); font-style: normal; }
.contacto svg { width: 12pt; height: 12pt; }

/* Hoja 2 */
.cabeza { display: flex; justify-content: space-between; align-items: baseline; padding: 0 4pt; }
.cabeza b { font: 800 13pt var(--display); letter-spacing: -.02em; }
.cabeza .serif { font-size: 14pt; color: var(--marca); }
.rejilla { display: grid; grid-template-columns: 1fr 1fr; gap: 9pt; }
.panel { padding: 14pt 18pt; border-radius: 18pt; background: var(--papel); box-shadow: var(--sombra); }
.panel h2 { margin-bottom: 7pt; }
.saber { display: grid; gap: 6pt; }
.saber div b { display: block; font-size: 12pt; }
.saber div span { display: block; color: var(--ink-700); font-size: 11pt; line-height: 1.4; }
.lista { list-style: none; display: grid; gap: 7pt; }
.lista li b { display: block; font-size: 11.5pt; line-height: 1.3; }
.lista li span { display: block; color: var(--ink-600); font-size: 10.5pt; line-height: 1.35; }
.pastillas { display: flex; flex-wrap: wrap; gap: 6pt; }
.pastilla { padding: 5pt 11pt; border-radius: 99pt; background: var(--papel); box-shadow: inset 0 0 0 1px var(--ink-150);
  font-size: 10.5pt; font-weight: 600; color: var(--ink-800); }
.pastilla small { color: var(--ink-500); font-weight: 500; }
.nota { margin-top: 7pt; font-size: 10.5pt; color: var(--ink-600); }
.ancho { grid-column: 1 / -1; }
.cierre { margin-top: auto; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6pt 16pt; padding: 2pt 0 0; }
.cierre .serif { font-size: 20pt; color: var(--marca); }
.cierre p { margin-top: 4pt; font-size: 11pt; color: var(--ink-600); }

/* Anexo de certificados: como la carta de Divará, paneles por categoría con foto y luego cada sección.
   Fluye en varias hojas; las tarjetas no se parten. Los enlaces abren la verificación en línea. */
@page anexo { size: letter; margin: 0; }
.anexo { page: anexo; padding: .45in .55in .5in; background: var(--fondo); box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.anexo a { color: inherit; text-decoration: none; }
.anexo__intro { display: flex; justify-content: space-between; align-items: end; gap: 16pt; margin-bottom: 12pt; }
.anexo__intro h2 { font-size: 26pt; }
.anexo__intro p { max-width: 3.1in; font-size: 11pt; color: var(--ink-600); text-align: right; }
.menu { display: grid; grid-template-columns: repeat(5, 1fr); gap: 9pt; margin-bottom: 6pt; }
.menu a { position: relative; display: block; height: 1.7in; border-radius: 18pt; overflow: hidden; background: var(--papel); box-shadow: var(--sombra); }
.menu img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 8% top; }
.menu a::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgb(7 26 69 / 0) 25%, rgb(7 26 69 / .92) 78%); }
.menu span { position: absolute; z-index: 1; left: 12pt; right: 10pt; bottom: 11pt; color: #fff; }
.menu b { display: block; font: 800 14pt/1.05 var(--display); letter-spacing: -.02em; }
.menu small { display: inline-block; margin-top: 5pt; padding: 2pt 8pt; border-radius: 99pt; background: rgb(255 255 255 / .2);
  font-size: 8.5pt; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.seccion-cert { padding-top: 14pt; }
.seccion-cert h3 { display: flex; align-items: center; gap: 9pt; margin: 0 2pt 9pt; font: 800 17pt/1 var(--display); letter-spacing: -.025em; break-after: avoid; }
.seccion-cert h3 small { padding: 3pt 9pt; border-radius: 99pt; background: var(--azul-50); color: var(--marca); font: 700 9pt var(--sans); letter-spacing: .04em; }
.tarjetas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10pt; }
.tarjeta { break-inside: avoid; display: flex; flex-direction: column; border-radius: 16pt; overflow: hidden; background: var(--papel); box-shadow: var(--sombra); }
.tarjeta__img { height: 1in; overflow: hidden; background: var(--azul-50); border-bottom: 1px solid var(--ink-150); }
.tarjeta__img img { width: 100%; height: 100%; object-fit: cover; object-position: top; transform: scale(1.05); transform-origin: top; }
.tarjeta__img--vertical img { object-position: 85% 42%; transform: none; }
.tarjeta__sello { height: 100%; display: grid; place-content: center; justify-items: center; gap: 4pt; text-align: center;
  background: linear-gradient(160deg, var(--papel), var(--azul-100)); color: var(--marca); }
.tarjeta__sello svg { width: 20pt; height: 20pt; }
.tarjeta__sello b { font: 800 14pt/1 var(--display); letter-spacing: -.02em; }
.tarjeta__cuerpo { flex: 1; display: flex; flex-direction: column; gap: 2pt; padding: 9pt 11pt 10pt; }
.tarjeta__cuerpo b { font-size: 10.5pt; line-height: 1.25; }
.tarjeta__cuerpo span { font-size: 9.5pt; color: var(--ink-600); }
.tarjeta__ver { margin-top: auto; padding-top: 4pt; font-size: 9pt; font-weight: 700; color: var(--marca); }
.tarjeta__ver--sin { color: var(--ink-500); font-weight: 500; }

/* Lo que antes eran estilos en línea (la política de contenido no los permite) */
.titulo-trabajos { margin: 4pt 4pt 10pt; }
.rejilla--saber { gap: 10pt 22pt; }
.titulo-idiomas { margin: 11pt 0 7pt; }
.nota a, .contacto a { color: inherit; text-decoration: none; }
.nota a { color: var(--marca); font-weight: 700; }

/* Saludo por WhatsApp al cierre */
.saludo { display: inline-flex; align-items: center; gap: 7pt; padding: 6pt 14pt; border-radius: 99pt;
  background: var(--papel); box-shadow: inset 0 0 0 1px var(--ink-150); color: var(--marca); font-size: 11pt; font-weight: 700; text-decoration: none; }
.saludo svg { width: 13pt; height: 13pt; }

/* En el PDF los certificados van solo por nombre, en una lista a dos columnas dentro de un panel
   por categoría: menos hojas y la misma elegancia. Las imágenes quedan para la web. */
@media print {
  .menu { grid-template-columns: repeat(5, 1fr); gap: 7pt; }
  .menu a { height: auto; padding: 9pt 10pt; background: var(--azul-50); box-shadow: inset 0 0 0 1px var(--azul-100); }
  .menu img, .menu a::after { display: none; }
  .menu span { position: static; color: var(--ink-950); }
  .menu b { font-size: 11.5pt; }
  .menu small { background: var(--papel); color: var(--marca); }
  .seccion-cert { margin-top: 7pt; padding: 10pt 18pt 5pt; border-radius: 18pt; background: var(--papel); box-shadow: var(--sombra);
    box-decoration-break: clone; -webkit-box-decoration-break: clone; }
  .seccion-cert h3 { margin: 0 0 4pt; font-size: 15pt; }
  .tarjetas { grid-template-columns: 1fr 1fr; gap: 0 22pt; }
  .tarjeta { border-radius: 0; box-shadow: none; background: none; border-top: 1px solid var(--ink-150); }
  .tarjeta__img { display: none; }
  .tarjeta__cuerpo { display: grid; grid-template-columns: 1fr auto; column-gap: 8pt; row-gap: 0; padding: 3pt 0 3.5pt; }
  .tarjeta__cuerpo b { grid-column: 1 / -1; font-size: 10pt; line-height: 1.22; }
  .tarjeta__cuerpo span { font-size: 9pt; line-height: 1.3; }
  .tarjeta__cuerpo { align-content: start; }
  .tarjeta__ver { margin: 0; padding: 0; align-self: start; font-size: 9pt; line-height: 1.45; }
  .tarjeta__ver--sin { display: none; }
}

/* Solo en la web o solo en el PDF */
.barra { display: none; }
@media print { .solo-web { display: none !important; } }

@media screen {
  .solo-pdf { display: none !important; }
  html { scroll-behavior: smooth; scroll-padding-top: 84px; }
  body { font-size: 16px; }
  :focus-visible { outline: 3px solid #e08700; outline-offset: 2px; }

  .barra { display: block; position: sticky; top: 0; z-index: 10; padding: 10px 16px; }
  .barra__caja { max-width: 848px; margin: 0 auto; display: flex; align-items: center; gap: 10px;
    padding: 6px 6px 6px 18px; border-radius: 999px; box-shadow: var(--sombra);
    background: color-mix(in oklab, var(--papel) 78%, transparent); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); }
  .barra__logo { font: 800 17px var(--display); letter-spacing: -.02em; margin-right: auto; color: var(--ink-950); text-decoration: none; }
  .boton { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 999px;
    font: 600 15px var(--sans); text-decoration: none; white-space: nowrap; transition: transform .2s, background-color .2s; }
  .boton:active { transform: scale(.97); }
  .boton svg { width: 18px; height: 18px; }
  .boton--primario { background: var(--ink-950); color: var(--papel); }
  .boton--primario:hover { background: var(--ink-800); }
  .boton--suave { color: var(--ink-800); }
  .boton--suave:hover { background: var(--ink-150); }

  .hoja { width: auto; max-width: 880px; height: auto; margin: 0 auto; padding: 8px 16px 20px; overflow: visible; gap: 16px; }
  .hoja + .hoja { padding-top: 12px; gap: 16px; }
  .contacto, .cierre { margin-top: 8px; }
  .cierre { padding: 16px 0 8px; }
  .contacto a:hover { text-decoration: underline; }

  .anexo { max-width: 880px; margin: 0 auto; padding: 40px 16px 72px; }
  .menu a, .tarjeta { transition: transform .25s cubic-bezier(.22, 1, .36, 1), box-shadow .25s; }
  .menu a:hover, a.tarjeta:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 2px var(--marca); }
}

@media screen and (max-width: 720px) {
  h1 { font-size: 40px; }
  .portada { grid-template-columns: 1fr; gap: 12px; padding: 12px; }
  .portada > div:first-child { padding: 4px 8px 6px; }
  .foto { order: -1; width: 88px; height: 104px; border-radius: 16px; margin: 4px 8px 0; }
  .presentacion { font-size: 17px; }
  .cifras { grid-template-columns: 1fr 1fr; }
  .trabajo { grid-template-columns: 1fr; gap: 8px; padding: 16px; }
  .contacto { grid-template-columns: 1fr; }
  .rejilla, .rejilla--saber { grid-template-columns: 1fr; }
  .anexo__intro { flex-direction: column; align-items: start; gap: 6px; }
  .anexo__intro p { text-align: left; max-width: none; }
  .menu { grid-template-columns: 1fr 1fr; }
  .menu a:first-child { grid-column: 1 / -1; }
  .menu a { height: 150px; }
  .tarjetas { grid-template-columns: 1fr 1fr; }
  .tarjeta__img { height: 96px; }
  .barra__caja .boton--suave { display: none; }
}
@media screen and (max-width: 380px) {
  .tarjetas { grid-template-columns: 1fr; }
  .tarjeta__img { height: 140px; }
}

/* En el PDF el contacto lleva tres líneas (teléfono, correo y LinkedIn): menos relleno para que la hoja 1 cierre limpia. */
@media print {
  .contacto { padding: 12pt 22pt; }
  .contacto ul { gap: 3pt; }
  .contacto li i { width: 19pt; height: 19pt; }
}