/* ============ CABECERA DE PÁGINA INTERIOR ============ */
.portadilla{
  --texto:var(--hueso);
  --texto-suave:rgba(247,244,242,.76);
  --fondo:var(--tinta);
  --fondo-alt:var(--grafito);
  --borde:rgba(247,244,242,.28);
  --borde-sutil:rgba(247,244,242,.14);
  --acento:var(--carmin-luz);

  position:relative;overflow:clip;isolation:isolate;
  background:var(--tinta);color:var(--hueso);
  padding-block:clamp(6rem,13vw,9.5rem) clamp(3rem,6vw,4.5rem);
  min-height:min(52svh,520px);display:flex;align-items:flex-end;
}
@supports not (overflow:clip){.portadilla{overflow:hidden}}
.portadilla__fondo{
  position:absolute;inset:0;z-index:-2;
  width:100%;height:100%;max-width:none;object-fit:cover;
  filter:grayscale(.45) brightness(.5);
  transform:scale(1.04);
}
.portadilla__velo{
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(180deg,rgba(18,16,15,.9) 0%,rgba(18,16,15,.42) 45%,rgba(18,16,15,.92) 100%),
    radial-gradient(60% 90% at 6% 100%,rgba(158,31,61,.4),transparent 65%);
}
.portadilla h1{color:#fff;max-width:18ch;margin-bottom:.6rem;font-size:var(--t-3xl)}
.portadilla p{color:rgba(247,244,242,.82);max-width:60ch;font-size:var(--t-md);margin:0}
.portadilla .migas{color:rgba(247,244,242,.6);margin-bottom:1.4rem}
.portadilla .migas span[aria-current]{color:#fff}
.portadilla .migas a:hover{color:var(--carmin-luz)}
.portadilla .ojillo{color:var(--carmin-luz)}
.portadilla__anillo{
  position:absolute;z-index:-1;right:-6%;top:-18%;
  width:min(46vw,520px);aspect-ratio:1;border-radius:50%;
  border:1px solid rgba(232,93,124,.24);
}
.portadilla__anillo::after{content:"";position:absolute;inset:14px;border-radius:50%;border:1px solid rgba(232,93,124,.15)}

/* ============ BLOQUE PARTIDO ============ */
.partido{display:grid;gap:clamp(2rem,5vw,4rem);align-items:center}
@media(min-width:960px){
  .partido{grid-template-columns:1fr 1fr}
  .partido--ancho-texto{grid-template-columns:1.1fr .9fr}
  .partido--invertido > *:first-child{order:2}
}
.partido__figura{position:relative;border-radius:var(--r-lg);overflow:hidden}
.partido__figura img{width:100%;aspect-ratio:4/3;object-fit:cover}
.partido__figura--alta img{aspect-ratio:3/4}
.partido__sello{
  position:absolute;right:1.2rem;bottom:1.2rem;
  padding:1.1rem 1.4rem;border-radius:var(--r-md);
  background:rgba(18,16,15,.82);color:#fff;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(247,244,242,.16);
  max-width:64%;
}
.partido__sello b{
  display:block;font-family:var(--display);font-size:var(--t-xl);line-height:1;
  color:var(--carmin-luz);margin-bottom:.2rem;
}
.partido__sello small{font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;color:rgba(247,244,242,.75)}
.lista-marcada{list-style:none;padding:0;margin:1.5rem 0}
.lista-marcada li{
  position:relative;padding-left:2rem;margin-bottom:.85rem;
  font-size:var(--t-sm);color:var(--texto-suave);
}
.lista-marcada li::before{
  content:"";position:absolute;left:0;top:.42em;
  width:13px;height:13px;border-radius:50%;
  border:1.5px solid var(--carmin);
}
.lista-marcada li::after{
  content:"";position:absolute;left:4.5px;top:calc(.42em + 4.5px);
  width:4px;height:4px;border-radius:50%;background:var(--carmin);
}
.lista-marcada strong{color:var(--texto);font-weight:600}

/* ============ OFICINAS ============ */
.oficina{
  display:grid;gap:0;border:1px solid var(--borde-sutil);border-radius:var(--r-lg);
  overflow:hidden;background:var(--fondo-alt);
  transition:box-shadow var(--v-medio) var(--ease),border-color var(--v-medio) var(--ease);
}
.oficina:hover{box-shadow:var(--s-2);border-color:rgba(204,54,90,.24)}
.oficina__foto{position:relative;aspect-ratio:16/9;overflow:hidden}
.oficina__foto img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.oficina:hover .oficina__foto img{transform:scale(1.06)}
.oficina__ciudad{
  position:absolute;left:1.1rem;bottom:1.1rem;z-index:2;
  font-family:var(--display);font-size:var(--t-xl);color:#fff;
  text-shadow:0 2px 18px rgba(0,0,0,.6);margin:0;
}
.oficina__foto::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(18,16,15,.75))}
.oficina__cuerpo{padding:1.6rem;display:grid;gap:.9rem}
.oficina__fila{display:flex;gap:.8rem;align-items:flex-start;font-size:var(--t-sm)}
.oficina__fila svg{width:17px;height:17px;color:var(--acento);flex:none;margin-top:.22em}
.oficina__fila b{display:block;font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--texto-suave);margin-bottom:.15rem;font-weight:600}
.oficina__fila a:hover{color:var(--acento)}

/* ============ FORMULARIO ============ */
.formulario{display:grid;gap:1.1rem}
.campo{display:grid;gap:.45rem}
.campo--par{display:grid;gap:1.1rem}
@media(min-width:640px){.campo--par{grid-template-columns:1fr 1fr}}
.campo label{
  font-size:var(--t-xs);font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--texto-suave);
}
.campo label .req{color:var(--acento)}
.campo input,.campo select,.campo textarea{
  width:100%;padding:.92rem 1.1rem;
  font-family:inherit;font-size:var(--t-base);color:var(--texto);
  background:var(--fondo-alt);
  border:1.5px solid var(--borde);border-radius:var(--r-md);
  transition:border-color var(--v-rapido) var(--ease),box-shadow var(--v-rapido) var(--ease),background-color var(--v-rapido) var(--ease);
  -webkit-appearance:none;appearance:none;
}
.campo textarea{min-height:140px;resize:vertical;line-height:1.6}
.campo select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B6469' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1rem center;background-size:16px;
  padding-right:2.8rem;cursor:pointer;
}
.campo input:focus,.campo select:focus,.campo textarea:focus{
  outline:0;border-color:var(--carmin);box-shadow:0 0 0 4px var(--carmin-velo);
}
.campo input::placeholder,.campo textarea::placeholder{color:var(--niebla)}
.campo--error input,.campo--error select,.campo--error textarea{border-color:#C0392B}
.campo__error{font-size:var(--t-xs);color:#C0392B;font-weight:600}
.consentimiento{
  display:flex;gap:.75rem;align-items:flex-start;
  font-size:var(--t-xs);color:var(--texto-suave);line-height:1.55;
}
.consentimiento input{
  width:19px;height:19px;flex:none;margin-top:.15em;accent-color:var(--carmin);cursor:pointer;
}
.consentimiento a{color:var(--acento);text-decoration:underline;text-underline-offset:2px}
/* Trampa para robots */
.tarro{position:absolute;left:-9999px;opacity:0;height:0;width:0;overflow:hidden}
.aviso{
  padding:1rem 1.2rem;border-radius:var(--r-md);font-size:var(--t-sm);
  border:1.5px solid;display:flex;gap:.7rem;align-items:flex-start;
}
.aviso svg{width:18px;height:18px;flex:none;margin-top:.15em}
.aviso--ok{background:rgba(28,120,72,.09);border-color:rgba(28,120,72,.4);color:#166B41}
.aviso--mal{background:rgba(192,57,43,.08);border-color:rgba(192,57,43,.4);color:#A8321F}
.tono-tinta .campo input,.tono-tinta .campo select,.tono-tinta .campo textarea{
  background:rgba(247,244,242,.06);border-color:rgba(247,244,242,.18);color:var(--hueso);
}
.tono-tinta .campo input::placeholder,.tono-tinta .campo textarea::placeholder{color:rgba(247,244,242,.4)}

.caja-formulario{
  position:relative;padding:clamp(1.7rem,3.5vw,2.8rem);
  background:var(--fondo-alt);border:1px solid var(--borde-sutil);
  border-radius:var(--r-lg);box-shadow:var(--s-2);
}
.caja-formulario::before{
  content:"";position:absolute;left:0;top:0;width:100%;height:4px;border-radius:var(--r-lg) var(--r-lg) 0 0;
  background:linear-gradient(90deg,var(--vino),var(--carmin) 50%,var(--carmin-luz));
}

/* ============ ENTRADAS ============ */
.nota{
  display:flex;flex-direction:column;
  background:var(--fondo-alt);border:1px solid var(--borde-sutil);
  border-radius:var(--r-lg);overflow:hidden;
  transition:transform var(--v-medio) var(--ease),box-shadow var(--v-medio) var(--ease);
}
.nota:hover{transform:translateY(-5px);box-shadow:var(--s-2)}
.nota__foto{aspect-ratio:16/10;overflow:hidden;background:var(--lino)}
.nota__foto img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.nota:hover .nota__foto img{transform:scale(1.06)}
.nota__cuerpo{padding:1.4rem 1.5rem 1.6rem;display:flex;flex-direction:column;flex:1}
.nota__meta{
  display:flex;gap:.7rem;align-items:center;flex-wrap:wrap;
  font-size:var(--t-xs);color:var(--texto-suave);margin-bottom:.7rem;
}
.nota__cat{
  padding:.2rem .6rem;border-radius:var(--r-full);
  background:var(--carmin-velo);color:var(--carmin-hondo);font-weight:600;
}
.nota h3{font-size:var(--t-md);margin-bottom:.5rem;line-height:1.25}
.nota:hover h3 a{color:var(--acento)}
.nota p{font-size:var(--t-sm);color:var(--texto-suave);flex:1;margin-bottom:1rem}

.paginacion{display:flex;gap:.4rem;justify-content:center;flex-wrap:wrap;margin-top:3rem}
.paginacion .page-numbers{
  min-width:44px;height:44px;display:grid;place-items:center;padding:0 .8rem;
  border:1px solid var(--borde);border-radius:var(--r-sm);
  font-size:var(--t-sm);font-weight:600;
  transition:background-color var(--v-rapido) var(--ease),color var(--v-rapido) var(--ease),border-color var(--v-rapido) var(--ease);
}
.paginacion .page-numbers:hover{border-color:var(--carmin);color:var(--acento)}
.paginacion .current{background:var(--carmin);border-color:var(--carmin);color:#fff}

/* Cuerpo de artículo */
.prosa{max-width:var(--anchura-lectura)}
.prosa > * + *{margin-top:1.15em}
.prosa h2{font-size:var(--t-xl);margin-top:2.2em}
.prosa h3{font-size:var(--t-lg);margin-top:1.8em}
.prosa img{border-radius:var(--r-md)}
.prosa a:not(.btn){color:var(--acento);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.prosa a:not(.btn):hover{text-decoration-thickness:2px}
.prosa ul li::marker{color:var(--acento)}

/* ============ PIE ============ */
.pie{background:var(--tinta);color:rgba(247,244,242,.72);padding-block:clamp(3.5rem,7vw,5.5rem) 0;position:relative;overflow:clip}
@supports not (overflow:clip){.pie{overflow:hidden}}
.pie__anillo{
  position:absolute;left:-8%;bottom:-30%;z-index:0;
  width:min(50vw,560px);aspect-ratio:1;border-radius:50%;
  border:1px solid rgba(232,93,124,.16);pointer-events:none;
}
.pie__anillo::after{content:"";position:absolute;inset:18px;border-radius:50%;border:1px solid rgba(232,93,124,.1)}
.pie__caja{position:relative;z-index:1;display:grid;gap:2.5rem}
@media(min-width:900px){.pie__caja{grid-template-columns:1.5fr 1fr 1fr 1.2fr}}
.pie img.pie__logo{height:44px;width:auto;margin-bottom:1.2rem}
.pie h4{
  color:#fff;font-family:var(--texto-fuente);font-size:var(--t-xs);
  letter-spacing:.16em;text-transform:uppercase;margin-bottom:1.1rem;font-weight:600;
}
.pie p{font-size:var(--t-sm);line-height:1.7}
.pie ul{list-style:none;padding:0;margin:0}
.pie li{margin-bottom:.55rem}
.pie a{font-size:var(--t-sm);transition:color var(--v-rapido) var(--ease),padding-left var(--v-rapido) var(--ease);display:inline-block}
.pie a:hover{color:var(--carmin-luz)}
.pie ul a:hover{padding-left:.3rem}
.pie__contacto li{display:flex;gap:.65rem;align-items:flex-start;font-size:var(--t-sm)}
.pie__contacto svg{width:15px;height:15px;color:var(--carmin-luz);flex:none;margin-top:.28em}
.pie__redes{display:flex;gap:.6rem;margin-top:1.4rem}
.pie__redes a{
  width:42px;height:42px;display:grid;place-items:center;border-radius:50%;
  border:1px solid rgba(247,244,242,.18);
  transition:background-color var(--v-rapido) var(--ease),border-color var(--v-rapido) var(--ease),transform var(--v-rapido) var(--ease);
}
.pie__redes a:hover{background:var(--carmin);border-color:var(--carmin);color:#fff;transform:translateY(-3px)}
.pie__redes svg{width:18px;height:18px}
.pie__base{
  position:relative;z-index:1;
  margin-top:clamp(2.5rem,5vw,4rem);padding-block:1.5rem;
  border-top:1px solid rgba(247,244,242,.12);
  display:flex;flex-wrap:wrap;gap:.8rem 1.6rem;align-items:center;justify-content:space-between;
  font-size:var(--t-xs);color:rgba(247,244,242,.55);
}
.pie__base nav{display:flex;gap:1.2rem;flex-wrap:wrap}
.pie__aviso{
  font-size:.72rem;color:rgba(247,244,242,.42);line-height:1.6;
  max-width:100%;padding-bottom:1.6rem;
}

/* ============ BOTONES FLOTANTES ============ */
.flotantes{
  position:fixed;right:clamp(.9rem,2.5vw,1.6rem);bottom:clamp(.9rem,2.5vw,1.6rem);
  z-index:90;display:grid;gap:.6rem;justify-items:end;
}
.flotante{
  width:54px;height:54px;display:grid;place-items:center;border-radius:50%;
  color:#fff;box-shadow:var(--s-3);
  transition:transform var(--v-rapido) var(--ease-resorte),box-shadow var(--v-medio) var(--ease);
}
.flotante:hover{transform:scale(1.08) translateY(-2px)}
.flotante svg{width:26px;height:26px}
.flotante--wa{background:#25D366}
.flotante--tel{background:var(--carmin)}
.flotante--arriba{
  background:var(--tinta);width:46px;height:46px;
  opacity:0;pointer-events:none;transform:translateY(10px);
  transition:opacity var(--v-medio) var(--ease),transform var(--v-medio) var(--ease);
}
.flotante--arriba svg{width:19px;height:19px}
.flotante--arriba.se-ve{opacity:1;pointer-events:auto;transform:translateY(0)}

/* Barra de progreso de lectura */
.progreso{
  position:fixed;top:0;left:0;height:3px;z-index:100;
  background:linear-gradient(90deg,var(--vino),var(--carmin),var(--carmin-luz));
  width:var(--avance,0%);transition:width .1s linear;
}
