.portafolio {
  width: 100%;
  text-align: left;
  max-width: none;
  height: auto;
  flex: 0 0 auto;
  align-items: stretch;
  padding: 0;
  color: #fff8e9;
}
.portafolio *, .ficha-proyecto * { font-family: "Source Sans 3", Arial, sans-serif; }
.cabecera-portafolio {
  display: flex;
  flex: 0 0 auto;
  width: 88%;
  align-self: center;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 0 48px;
  text-align: left;
}
.portafolio h1, .portafolio h2, .ficha-proyecto h2 {
  font-family: "Source Serif 4", Georgia, serif;
  font-weight: 400;
  text-wrap: balance;
}
.portafolio h1 { width: 100%; font-size: clamp(38px, 5.4vw, 68px); line-height: 1.14; letter-spacing: -.025em; }
.cabecera-portafolio > p { width: 100%; margin-top: 28px; color: #d0cdc7; font-size: 20px; font-weight: 300; line-height: 1.65; text-wrap: pretty; }
.cabecera-portafolio strong, .texto-proyecto strong, .texto-ficha strong { font-weight: 600; color: #fff8e9; }
.proyectos-portafolio { width: 77%; max-width: none; align-self: center; flex: 0 0 auto; flex-direction: column; gap: 76px; }
.proyecto-portafolio { display: flex; align-items: center; gap: 48px; }
.proyecto-portafolio:nth-child(even) { flex-direction: row-reverse; }
.visual-proyecto {
  display: block;
  position: relative;
  overflow: hidden;
  flex: 0 0 44%;
  width: 44%;
  height: var(--alto-visual-proyecto, auto);
  padding: 0;
  border: 1px solid #ffffff13;
  border-radius: 18px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  isolation: isolate;
}
.imagen-proyecto { display: block; width: 100%; height: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

/* Transparencia solo en la fotografía; logos y filtro conservan su propia capa. */
.imagen-proyecto, .imagen-ficha { opacity: .94; }
.visual-proyecto, .visual-ficha {
  box-shadow: 0 14px 32px rgb(0 0 0 / 22%), 0 4px 10px rgb(0 0 0 / 12%);
}
.visual-proyecto::before, .visual-ficha::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  background: linear-gradient(135deg, rgb(255 255 255 / 4%), transparent 42%, rgb(255 255 255 / 1%));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 12%);
  pointer-events: none;
}

/* Capa negra gradual compartida por todas las imágenes, debajo de los logos. */
.visual-proyecto::after, .visual-ficha::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(180deg,
    rgb(0 0 0 / 3%) 0%,
    rgb(0 0 0 / 7%) 45%,
    rgb(0 0 0 / 28%) 100%);
  pointer-events: none;
}
.marca-proyecto {
  position: absolute;
  right: 18px;
  left: auto;
  top: 14px;
  bottom: auto;
  display: block;
  width: 51.2px;
  max-width: calc(100% - 36px);
  height: auto;
  padding: 0;
  z-index: 3;
}
.marca-proyecto--cuadrada { width: 51.2px; }
.marca-proyecto--rectangular { width: 105.6px; }
.marca-proyecto img {
  display: block;
  width: 100%;
  height: auto;
  /* Las sombras siguen la transparencia del logo sin alterar sus colores. */
  filter: drop-shadow(0 1px 2px rgb(255 248 233 / 55%))
    drop-shadow(0 3px 5px rgb(0 0 0 / 60%))
    drop-shadow(0 7px 14px rgb(0 0 0 / 38%));
}
.texto-proyecto { flex: 1 1 0; min-width: 0; flex-direction: column; align-items: flex-start; }
.texto-proyecto h2 { font-size: clamp(27px, 2.6vw, 35px); line-height: 1.18; letter-spacing: -.02em; }
.texto-proyecto > p { margin-top: 18px; font-size: 18px; font-weight: 300; line-height: 1.65; color: #d0cdc7; }
.abrir-proyecto {
  display: inline-flex;
  align-items: center;
  margin-top: 26px;
  padding: 9px 0;
  border: 0;
  border-bottom: 1px solid #d1b26455;
  background: transparent;
  color: #f1d38c;
  font: 400 16px/1.4 "IBM Plex Sans", Arial, sans-serif;
  cursor: pointer;
  transition: color 180ms ease, border-color 180ms ease;
}
.visual-proyecto:disabled, .abrir-proyecto:disabled { cursor: default; opacity: 1; }
.abrir-proyecto:hover:not(:disabled) { color: #fff8e9; border-color: #f1d38c; }
.visual-proyecto:focus-visible, .abrir-proyecto:focus-visible, .ficha-proyecto a:focus-visible, .cerrar-ficha:focus-visible { outline: 2px solid #f1d38c; outline-offset: 5px; }
.cierre-portafolio { --espacio-cierre: 44px; position: relative; width: 77%; max-width: none; align-self: center; flex: 0 0 auto; padding: var(--espacio-cierre) 0; margin-top: 0; text-align: left; }
.cierre-portafolio::before { content: ""; position: absolute; top: calc(var(--espacio-cierre) / 2); left: 0; width: 100%; height: 1px; background: linear-gradient(90deg, transparent, #f1d38c 15%, #f1d38c 85%, transparent); opacity: .2; pointer-events: none; }
.cierre-portafolio h2 { font-size: clamp(32px, 3vw, 42px); line-height: 1.25; margin-bottom: 44px; }
.grupos-tecnologias { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 48px 56px; }
.grupo-tecnologias { flex: 0 0 calc((100% - 56px) / 2); min-width: 0; padding-top: 24px; border-top: 1px solid #f1d38c33; }
.grupo-tecnologias h3 { margin: 0; color: #fff8e9; font-family: "Source Serif 4", Georgia, serif; font-size: clamp(25px, 2.2vw, 31px); font-weight: 400; letter-spacing: -.02em; line-height: 1.2; text-align: left; text-wrap: balance; }
.descripcion-tecnologias { margin: 14px 0 24px; color: #d0cdc7; font-size: 17px; font-weight: 300; line-height: 1.65; text-wrap: pretty; }
.lista-tecnologias { display: flex; flex-wrap: wrap; gap: 10px 16px; margin: 0; padding: 0; list-style: none; }
.tecnologia-portafolio { display: flex; flex: 0 0 calc((100% - 32px) / 3); min-width: 0; min-height: 46px; align-items: center; gap: 10px; padding: 6px 0; }
.tecnologia-portafolio img { display: block; flex: 0 0 30px; width: 30px; height: 30px; object-fit: contain; }
.tecnologia-portafolio span { color: #e7e0d2; font-size: 15px; font-weight: 300; line-height: 1.35; text-align: left; }

.ficha-proyecto {
  inset: 0;
  margin: auto;
  width: min(960px, calc(100% - 56px));
  max-width: none;
  max-height: calc(100dvh - 56px);
  padding: 0;
  border: 1px solid #f1d38c30;
  border-radius: 8px;
  background: #191917;
  color: #fff8e9;
  box-shadow: 0 28px 100px #0008;
  overflow: auto;
}
.ficha-proyecto:not([open]) { display: none; }
.ficha-proyecto::backdrop { background: #050505ce; backdrop-filter: blur(8px); }
.contenido-ficha { min-height: 420px; align-items: stretch; }
.visual-ficha { position: relative; flex: 0 0 36%; min-width: 0; align-self: center; border-radius: 18px; overflow: hidden; isolation: isolate; background: transparent; }
.imagen-ficha { display: block; width: 100%; height: auto; max-height: 320px; object-fit: contain; }
.texto-ficha { flex: 1 1 0; flex-direction: column; min-width: 0; padding: 56px 38px 40px; }
.texto-ficha h2 { font-size: 33px; line-height: 1.2; margin: 0 0 20px; }
.texto-ficha p { font-size: 17px; font-weight: 300; line-height: 1.65; color: #d0cdc7; }
.texto-ficha ul { margin: 22px 0 28px; padding-left: 18px; color: #e7e0d2; font-size: 16px; line-height: 1.5; }
.texto-ficha li { padding: 4px 0; }
.texto-ficha li::marker { color: #d7b465; }
.texto-ficha > p + .enlace-ficha { margin-top: 28px; }
.enlace-ficha { display: inline-flex; align-items: center; align-self: flex-start; gap: 16px; min-height: 44px; color: #f1d38c; font-size: 16px; text-decoration: underline; text-underline-offset: 5px; }
.cerrar-ficha { position: absolute; top: 12px; right: 12px; z-index: 2; display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1px solid #ffffff25; border-radius: 50%; background: #191917e8; color: #fff8e9; font: 300 29px/1 Arial, sans-serif; cursor: pointer; }
@media (max-width: 1100px) {



  .cabecera-portafolio, .proyectos-portafolio, .cierre-portafolio { width: 100%; }
  .proyecto-portafolio, .proyecto-portafolio:nth-child(even) { flex-direction: column; align-items: stretch; gap: 23px; }
  .visual-proyecto { width: 100%; max-width: 480px; height: auto; flex: 0 0 auto; align-self: center; }
  .imagen-proyecto { height: auto; }
}
@media (max-width: 780px) {
  .grupos-tecnologias { gap: 34px; }
  .grupo-tecnologias { flex-basis: 100%; }
}
@media (max-width: 640px) {
  .tecnologia-portafolio { flex-basis: calc((100% - 16px) / 2); }
  .descripcion-tecnologias { font-size: 16px; }
  .grupo-tecnologias h3 { font-size: 26px; }

  .cabecera-portafolio { padding: 28px 0 36px; }
  .portafolio h1 { font-size: clamp(36px, 9.5vw, 48px); }
  .cabecera-portafolio > p { font-size: 18px; margin-top: 24px; }
  .proyectos-portafolio { gap: 48px; }
  .proyecto-portafolio, .proyecto-portafolio:nth-child(even) { flex-direction: column; align-items: stretch; gap: 23px; }

  .texto-proyecto h2 { font-size: 28px; }
  .texto-proyecto > p { margin-top: 13px; line-height: 1.6; }
  .abrir-proyecto { margin-top: 17px; min-height: 44px; }
  .marca-proyecto { right: 14px; left: auto; top: 12px; bottom: auto; max-width: calc(100% - 28px); }
  .marca-proyecto, .marca-proyecto--cuadrada { width: 43.2px; }
  .marca-proyecto--rectangular { width: 92.8px; }
  .cierre-portafolio { --espacio-cierre: 32px; }
  .cierre-portafolio h2 { font-size: 29px; margin-bottom: 32px; }
  .ficha-proyecto { width: calc(100% - 28px); max-height: calc(100dvh - 28px); }
  .contenido-ficha { flex-direction: column; min-height: 0; }
  .visual-ficha { flex: 0 0 auto; width: 100%; height: auto; }
  .texto-ficha { padding: 28px 24px 30px; }
  .texto-ficha h2 { font-size: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .portafolio *, .ficha-proyecto * { scroll-behavior: auto; transition: none; animation: none; }
}