/* Índice de portfolio (/portfolio/ y /en/portfolio/) — hoja compartida por ES y EN.
   Mismo lenguaje visual que las fichas de proyecto (ficha-proyecto.css) y que /inversion/.
   Cargar DESPUÉS de robotuno-migration-overrides.css; varios valores llevan !important
   porque las reglas genéricas del tema (img, button) pisan estilos de igual especificidad. */

body.ru-portfolio-index #main{background:linear-gradient(180deg,#f7faff 0%,#f8fafc 280px)}

.ru-pf-shell{box-sizing:border-box;max-width:1180px;margin:0 auto;padding:48px 20px 80px}

/* ── Cabecera de sección ── */
.ru-pf-head{margin:0 auto 30px;max-width:760px;text-align:center}
.ru-pf-head__eyebrow{display:block;margin-bottom:10px;color:#3f73b9!important;font-size:.78rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.ru-pf-head h2{margin:0!important;color:#0f2343!important;font-size:clamp(1.5rem,2.8vw,2.1rem)!important;line-height:1.15!important;letter-spacing:-.03em}
.ru-pf-head p{margin:10px auto 0;max-width:640px;color:#5b6b81!important;font-size:.98rem;line-height:1.65}

/* ── Viñeta de proyecto ──
   La tarjeta NO es un <a> (no puede contener los botones del carrusel). Es un <article>
   y el enlace del título se "estira" sobre toda la tarjeta con ::after; los botones del
   carrusel van por encima de esa capa para seguir siendo clicables. */
.ru-pf-list{display:grid;gap:32px;counter-reset:pf}

.ru-pf-card{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
  box-sizing:border-box;
  counter-increment:pf;
  border:1px solid rgba(16,35,63,.08);
  border-radius:22px;
  background:linear-gradient(180deg,#fff 0%,#fbfdff 100%);
  overflow:hidden;
  box-shadow:0 1px 2px rgba(16,35,63,.06),0 16px 40px rgba(16,35,63,.07);
  transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease;
}
/* Hairline de acento en azul activo corporativo; aparece al pasar el ratón */
.ru-pf-card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;z-index:2;
  background:#2563eb;
  opacity:0;
  transition:opacity .28s ease;
  pointer-events:none;
}
.ru-pf-card:hover::before,
.ru-pf-card:has(.ru-pf-card__link:focus-visible)::before{opacity:1}
.ru-pf-card:hover,
.ru-pf-card:has(.ru-pf-card__link:focus-visible){
  transform:translateY(-5px);
  border-color:rgba(37,99,235,.45);
  box-shadow:0 2px 4px rgba(16,35,63,.05),0 30px 64px rgba(37,99,235,.16);
}
.ru-pf-card:has(.ru-pf-card__link:focus-visible){outline:3px solid #2563eb;outline-offset:3px}

/* Capa de enlace: cubre la tarjeta entera salvo los controles del carrusel (z-index 3) */
.ru-pf-card__link{color:inherit!important;text-decoration:none!important}
.ru-pf-card__link::after{content:"";position:absolute;inset:0;z-index:1}
/* Respaldo para navegadores sin :has() */
.ru-pf-card__link:focus-visible{outline:3px solid #2563eb;outline-offset:2px;border-radius:4px}

/* ── Carrusel ── */
.ru-pf-card__media{
  position:relative;aspect-ratio:4/3;overflow:hidden;
  background:#fff;
  border-right:1px solid rgba(16,35,63,.08);
}

.ru-pf-slider{position:absolute;inset:0;overflow:hidden}
.ru-pf-slider__track{display:flex;height:100%;transition:transform .38s cubic-bezier(.4,0,.2,1)}
/* Las fotos de un mismo proyecto mezclan vertical y horizontal: 'contain' para no
   recortar ninguna. El !important gana a `body.robotuno-static-migration img{height:auto}`. */
.ru-pf-slider__track img{
  box-sizing:border-box;
  flex:0 0 100%;
  display:block;
  width:100%!important;height:100%!important;
  max-width:none;
  padding:18px;
  object-fit:contain;object-position:center;
  background:#fff;
  transition:transform .45s cubic-bezier(.2,.6,.2,1);
}
.ru-pf-card:hover .ru-pf-slider__track img{transform:scale(1.035)}

/* Los botones se califican con el body para ganar a la regla global del tema
   `body.robotuno-static-migration button{background:var(--ru-color-accent)!important}`,
   que si no pinta las flechas como círculos azules. */
body.ru-portfolio-index .ru-pf-slider__btn{
  position:absolute;top:50%;z-index:3;
  transform:translateY(-50%);
  display:flex;align-items:center;justify-content:center;
  box-sizing:border-box;
  width:38px;height:38px;min-height:0;padding:0;
  border-radius:50%!important;
  background:rgba(255,255,255,.92)!important;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  border:1px solid rgba(16,35,63,.14)!important;
  box-shadow:0 4px 14px rgba(9,23,45,.16)!important;
  color:#0f2343!important;
  cursor:pointer;
  transition:background .18s ease,border-color .18s ease,box-shadow .18s ease;
}
body.ru-portfolio-index .ru-pf-slider__btn:hover,
body.ru-portfolio-index .ru-pf-slider__btn:focus-visible{background:#2563eb!important;border-color:#2563eb!important;box-shadow:0 6px 18px rgba(37,99,235,.38)!important}
body.ru-portfolio-index .ru-pf-slider__btn svg{width:15px;height:15px;fill:none!important;stroke:#0f2343!important;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:stroke .18s ease}
body.ru-portfolio-index .ru-pf-slider__btn:hover svg,
body.ru-portfolio-index .ru-pf-slider__btn:focus-visible svg{stroke:#fff!important}
body.ru-portfolio-index .ru-pf-slider__btn--prev{left:12px}
body.ru-portfolio-index .ru-pf-slider__btn--next{right:12px}

.ru-pf-slider__counter{
  position:absolute;bottom:12px;right:14px;z-index:3;
  padding:4px 10px;
  border-radius:999px;
  background:rgba(15,35,67,.72);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  border:1px solid rgba(255,255,255,.16);
  color:#fff!important;
  font-size:.68rem;font-weight:700;letter-spacing:.06em;
  font-variant-numeric:tabular-nums;
  pointer-events:none;
}

/* Placeholder mientras no haya fotos reales del proyecto */
.ru-pf-card__media--placeholder{
  display:grid;place-items:center;gap:12px;
  padding:28px;
  background:
    repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,transparent 1px 42px),
    repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 1px,transparent 1px 42px),
    linear-gradient(135deg,#0d3b86 0%,#0f2343 62%);
  text-align:center;
}
.ru-pf-card__media--placeholder svg{width:52px;height:52px;fill:none;stroke:rgba(255,255,255,.6);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.ru-pf-card__media-note{color:rgba(255,255,255,.62)!important;font-size:.76rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;line-height:1.5}

/* ── Cuerpo de la tarjeta ──
   Sin position:relative aquí a propósito: si el body fuera positioned, se
   convertiría en el contenedor de referencia de .ru-pf-card__link::after
   (el enlace que cubre toda la tarjeta) y ese enlace dejaría de estirarse
   sobre la imagen. La numeración vive en .ru-pf-card::after en su lugar. */
.ru-pf-card__body{
  display:flex;flex-direction:column;justify-content:center;gap:14px;
  padding:26px 38px 46px; /* más padding abajo que arriba: el bloque queda algo más alto */
  background:radial-gradient(90% 120% at 100% 0%,rgba(37,99,235,.045),transparent 55%);
}
/* Numeración editorial de proyecto (01, 02…), decorativa. La sintaxis `/ ""`
   la oculta a lectores de pantalla; navegadores antiguos simplemente no la pintan. */
.ru-pf-card::after{
  content:counter(pf,decimal-leading-zero) / "";
  position:absolute;top:20px;right:26px;
  color:rgba(37,99,235,.38);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.82rem;font-weight:700;letter-spacing:.16em;
  pointer-events:none;
}
.ru-pf-card__title{margin:0!important;color:#0f2343!important;font-size:clamp(1.5rem,1.9vw,1.75rem)!important;line-height:1.18!important;letter-spacing:-.02em;font-weight:800}
.ru-pf-card__title a{transition:color .2s ease}
.ru-pf-card:hover .ru-pf-card__title a{color:#1d4ed8!important}
.ru-pf-card__desc{margin:0!important;color:#4d5f78!important;font-size:.96rem;line-height:1.68}

/* Pills de tecnología: chip rectangular con "LED" de estado — más tech que la píldora lisa */
.ru-pf-card__tech{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 0!important;padding:0!important;list-style:none}
.ru-pf-card__tech li{
  display:inline-flex;align-items:center;gap:7px;
  padding:5px 12px 5px 10px;
  border:1px solid rgba(37,99,235,.22);
  border-radius:8px;
  background:linear-gradient(180deg,#f5f9ff,#eaf1fd);
  color:#173a6b!important;
  font-size:.79rem;font-weight:700;line-height:1.35;
  letter-spacing:.01em;
}
.ru-pf-card__tech li::before{
  content:"";flex:none;width:6px;height:6px;border-radius:50%;
  background:#2563eb;
  box-shadow:0 0 0 2px rgba(37,99,235,.14);
}

/* CTA: botón fantasma que se rellena cuando la tarjeta recibe hover/focus */
.ru-pf-card__cta{
  display:inline-flex;align-items:center;gap:8px;
  align-self:center;
  margin-top:10px;padding:9px 20px;
  border:1px solid rgba(37,99,235,.38);
  border-radius:999px;
  background:#fff;
  color:#2563eb!important;
  font-size:.88rem;font-weight:800;line-height:1.2;
  transition:background .2s ease,color .2s ease,border-color .2s ease,box-shadow .2s ease;
}
.ru-pf-card__cta span{transition:transform .2s ease}
.ru-pf-card:hover .ru-pf-card__cta,
.ru-pf-card:has(.ru-pf-card__link:focus-visible) .ru-pf-card__cta{
  background:#2563eb;border-color:#2563eb;
  color:#fff!important;
  box-shadow:0 10px 22px rgba(37,99,235,.30);
}
.ru-pf-card:hover .ru-pf-card__cta span{transform:translateX(3px)}

/* ── Rejilla de servicios ── */
.ru-pf-services{margin-top:88px}
.ru-pf-services__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.ru-pf-service{
  display:flex;flex-direction:column;gap:20px;
  box-sizing:border-box;
  padding:28px 24px;
  border:1px solid #e5e7eb;
  border-radius:16px;
  background:#fff;
  box-shadow:0 10px 30px rgba(16,35,63,.05);
  text-align:center;
  transition:box-shadow .25s ease,border-color .25s ease;
}
.ru-pf-service:hover{border-color:rgba(37,99,235,.35);box-shadow:0 18px 40px rgba(37,99,235,.12)}
.ru-pf-service__lead{margin:0!important;color:#334c72!important;font-size:.95rem;line-height:1.6}
.ru-pf-service__btn{
  display:inline-flex;align-items:center;justify-content:center;
  box-sizing:border-box;
  width:100%;min-height:52px;margin-top:auto;padding:12px 16px;
  border-radius:6px;
  background:#2563eb;
  color:#fff!important;-webkit-text-fill-color:#fff;
  font-size:.85rem;font-weight:800;letter-spacing:.03em;line-height:1.25;
  text-transform:uppercase;text-decoration:none!important;
  box-shadow:0 4px 8px rgba(0,0,0,.14);
  transition:background .2s ease,transform .2s ease,box-shadow .2s ease;
}
.ru-pf-service__btn:hover,
.ru-pf-service__btn:focus{background:#1d4ed8;color:#fff!important;transform:translateY(-1px);box-shadow:0 8px 16px rgba(0,0,0,.2);text-decoration:none!important}

/* ── CTA final ── */
.ru-pf-cta{
  box-sizing:border-box;
  margin-top:88px;
  padding:56px 28px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:30px;
  background:linear-gradient(180deg,#0f2343 0%,#16294a 100%);
  box-shadow:0 24px 60px rgba(9,23,45,.4);
  text-align:center;
}
.ru-pf-cta h2{margin:0!important;color:#fff!important;-webkit-text-fill-color:#fff;font-size:clamp(1.8rem,3.4vw,2.6rem)!important;line-height:1.12!important;letter-spacing:-.03em;font-weight:800}
.ru-pf-cta p{margin:14px auto 0;max-width:620px;color:rgba(226,232,240,.85)!important;font-size:1rem;line-height:1.7}
.ru-pf-cta__btn{
  display:inline-flex;align-items:center;justify-content:center;
  box-sizing:border-box;
  min-height:58px;margin-top:26px;padding:0 40px;
  border-radius:999px;
  background:#2563eb;
  color:#fff!important;-webkit-text-fill-color:#fff;
  font-size:1.02rem;font-weight:800;
  text-decoration:none!important;
  box-shadow:0 16px 34px rgba(37,99,235,.34);
  transition:background .2s ease,transform .2s ease,box-shadow .2s ease;
}
.ru-pf-cta__btn:hover,
.ru-pf-cta__btn:focus{background:#1d4ed8;color:#fff!important;transform:translateY(-2px);box-shadow:0 22px 44px rgba(37,99,235,.42);text-decoration:none!important}

/* ── Tablet ── */
@media (max-width:980px){
  .ru-pf-services__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ── Móvil: el carrusel pasa arriba ── */
@media (max-width:880px){
  .ru-pf-shell{padding:34px 16px 64px}
  .ru-pf-card{grid-template-columns:minmax(0,1fr)}
  .ru-pf-card__media{aspect-ratio:4/3;border-right:0;border-bottom:1px solid rgba(16,35,63,.08)}
  .ru-pf-card__media--placeholder{aspect-ratio:16/9}
  .ru-pf-card__body{padding:26px 22px}
  .ru-pf-card::after{top:16px;right:20px}
  .ru-pf-card__title{font-size:1.28rem!important;padding-right:44px}
  .ru-pf-slider__track img{padding:12px}
  .ru-pf-services{margin-top:64px}
  .ru-pf-cta{margin-top:64px;padding:44px 22px;border-radius:24px}
}

@media (max-width:640px){
  .ru-pf-services__grid{grid-template-columns:minmax(0,1fr)}
}

/* Respetar prefers-reduced-motion */
@media (prefers-reduced-motion:reduce){
  .ru-pf-card,
  .ru-pf-card::before,
  .ru-pf-slider__track,
  .ru-pf-slider__track img,
  .ru-pf-card__cta,
  .ru-pf-card__cta span,
  .ru-pf-card__title a,
  .ru-pf-service,
  .ru-pf-service__btn,
  .ru-pf-cta__btn{transition:none!important}
  .ru-pf-card:hover{transform:none}
  .ru-pf-card:hover .ru-pf-slider__track img{transform:none}
}