/* =====================================================================
   ESTILOS DE MARCA COMPARTIDOS · Maestro Edgar Santamaría Caleño
   Los usan las tres páginas: inicio, catálogo y hoja de vida.
   ===================================================================== */

/* Texturas de madera (generadas como SVG, no dependen de fotos) */
:root {
  --madera-marco: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNDAwIDQwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZGVmcz48ZmlsdGVyIGlkPSJ3ZiI+PGZlVHVyYnVsZW5jZSB0eXBlPSJmcmFjdGFsTm9pc2UiIGJhc2VGcmVxdWVuY3k9IjAuMDA0IDAuMTEiIG51bU9jdGF2ZXM9IjQiIHNlZWQ9IjkiLz48ZmVDb2xvck1hdHJpeCB0eXBlPSJtYXRyaXgiIHZhbHVlcz0iMCAwIDAgMCAwICAwIDAgMCAwIDAgIDAgMCAwIDAgMCAgMS40IDAgMCAwIC0wLjM1Ii8+PC9maWx0ZXI+PC9kZWZzPjxyZWN0IHdpZHRoPSI0MDAiIGhlaWdodD0iNDAwIiBmaWxsPSIjNmE0NDI5Ii8+PHJlY3Qgd2lkdGg9IjQwMCIgaGVpZ2h0PSI0MDAiIGZpbGw9IiMyNDE2MGQiIGZpbHRlcj0idXJsKCN3ZikiLz48L3N2Zz4=");
  --madera-banda: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTIwMCA0MDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGZpbHRlciBpZD0id2IiPjxmZVR1cmJ1bGVuY2UgdHlwZT0iZnJhY3RhbE5vaXNlIiBiYXNlRnJlcXVlbmN5PSIwLjAwMjUgMC4wNyIgbnVtT2N0YXZlcz0iNCIgc2VlZD0iMjEiLz48ZmVDb2xvck1hdHJpeCB0eXBlPSJtYXRyaXgiIHZhbHVlcz0iMCAwIDAgMCAwICAwIDAgMCAwIDAgIDAgMCAwIDAgMCAgMS40IDAgMCAwIC0wLjM1Ii8+PC9maWx0ZXI+PC9kZWZzPjxyZWN0IHdpZHRoPSIxMjAwIiBoZWlnaHQ9IjQwMCIgZmlsbD0iIzdhNTIzNCIvPjxyZWN0IHdpZHRoPSIxMjAwIiBoZWlnaHQ9IjQwMCIgZmlsbD0iIzJhMTgwZCIgZmlsdGVyPSJ1cmwoI3diKSIvPjwvc3ZnPg==");
  --madera-oscura: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgODAwIDEyMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGZpbHRlciBpZD0id2QiPjxmZVR1cmJ1bGVuY2UgdHlwZT0iZnJhY3RhbE5vaXNlIiBiYXNlRnJlcXVlbmN5PSIwLjAwMyAwLjA2IiBudW1PY3RhdmVzPSI0IiBzZWVkPSIzMyIvPjxmZUNvbG9yTWF0cml4IHR5cGU9Im1hdHJpeCIgdmFsdWVzPSIwIDAgMCAwIDAgIDAgMCAwIDAgMCAgMCAwIDAgMCAwICAxLjQgMCAwIDAgLTAuMzUiLz48L2ZpbHRlcj48L2RlZnM+PHJlY3Qgd2lkdGg9IjgwMCIgaGVpZ2h0PSIxMjAwIiBmaWxsPSIjMmMxZjE2Ii8+PHJlY3Qgd2lkdGg9IjgwMCIgaGVpZ2h0PSIxMjAwIiBmaWxsPSIjMTQwZDA4IiBmaWx0ZXI9InVybCgjd2QpIi8+PC9zdmc+");
}
.madera-banda  { background-image: var(--madera-banda);  background-size: cover; }
.madera-oscura { background-image: var(--madera-oscura); background-size: cover; }

/* Marco de autor: el elemento firma de la marca */
.marco {
  padding: clamp(10px, 1.6vw, 18px);
  background:
    linear-gradient(135deg, rgba(255,220,170,.28), transparent 30%, rgba(0,0,0,.35) 70%, rgba(255,210,150,.16)),
    var(--madera-marco);
  background-size: cover;
  box-shadow:
    inset 0 0 0 2px rgba(30,18,10,.8), inset 0 0 0 4px #B8914F, inset 0 0 0 6px rgba(30,18,10,.7),
    0 18px 40px -12px rgba(20,12,6,.5);
}
.marco > .paspartu { padding: clamp(6px, .9vw, 10px); background: #E8DFCC; box-shadow: inset 0 0 6px rgba(40,25,10,.45); }

:focus-visible { outline: 2px solid #B8914F; outline-offset: 3px; }

@keyframes aparecer { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.aparecer { animation: aparecer 1s cubic-bezier(.2,.7,.2,1) both; }
.aparecer-2 { animation-delay: .15s; } .aparecer-3 { animation-delay: .3s; }
@media (prefers-reduced-motion: reduce) { .aparecer { animation: none; } html { scroll-behavior: auto; } }