/*
Theme Name: Kadence IDP
Theme URI: https://institutodeldeporte.pe
Description: Tema hijo de Kadence para el Instituto del Deporte en Peru. Incluye la paleta, la tipografia y los componentes graficos del manual de identidad visual.
Author: IDP
Version: 1.1.0
Template: kadence
Text Domain: kadence-idp
*/

/* =========================================================
   1. Tokens del manual de marca
   ========================================================= */
:root{
  --idp-rojo:#D91E36;
  --idp-rojo-osc:#B71C1C;
  --idp-negro:#1C1C1C;
  --idp-gris:#6B6B6B;
  --idp-hueso:#F2F2F2;
  --idp-blanco:#FFFFFF;
  --idp-display:'Oswald', system-ui, sans-serif;
  --idp-ui:'Montserrat', system-ui, sans-serif;
  --idp-texto:'Open Sans', system-ui, sans-serif;
  --idp-shear:-11deg;      /* inclinacion de los paralelogramos del manual */
  /* Ruta relativa a este archivo: el navegador la resuelve desde /wp-content/themes/kadence-idp/ */
  --idp-logo:url("assets/idp-logo.png");
}

/* =========================================================
   2. Botones inclinados (motivo del manual)
   Aplicar la clase is-style-idp a cualquier boton de bloque.
   ========================================================= */
.wp-block-button.is-style-idp .wp-block-button__link,
.idp-btn{
  display:inline-block;
  font-family:var(--idp-ui);
  font-weight:700;
  font-size:14px;
  letter-spacing:.03em;
  text-decoration:none;
  padding:15px 32px;
  border:none;
  border-radius:0;
  cursor:pointer;
  color:var(--idp-blanco);
  background:var(--idp-rojo);
  transform:skewX(var(--idp-shear));
}
.wp-block-button.is-style-idp .wp-block-button__link > span,
.idp-btn > span{
  display:block;
  transform:skewX(calc(-1 * var(--idp-shear)));
}
.wp-block-button.is-style-idp .wp-block-button__link:hover,
.idp-btn:hover{ background:var(--idp-rojo-osc); color:var(--idp-blanco); }

.idp-btn--linea{
  background:transparent;
  box-shadow:inset 0 0 0 2px var(--idp-blanco);
}
.idp-btn--linea:hover{ background:var(--idp-blanco); color:var(--idp-negro); }

/* =========================================================
   3. Sellos y cintas
   ========================================================= */
.idp-sello,
.idp-cinta{
  display:inline-block;
  background:var(--idp-rojo);
  color:var(--idp-blanco);
  font-family:var(--idp-ui);
  font-weight:700;
  font-size:10.5px;
  letter-spacing:.07em;
  padding:6px 14px;
  transform:skewX(var(--idp-shear));
}
.idp-sello > span,
.idp-cinta > span{ display:block; transform:skewX(calc(-1 * var(--idp-shear))); }

/* =========================================================
   4. Tarjetas de curso
   ========================================================= */
.idp-curso{ background:var(--idp-blanco); position:relative; overflow:hidden; }
.idp-curso__media{ position:relative; height:158px; overflow:hidden; background:var(--idp-negro); }
.idp-curso__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.idp-curso__media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(28,28,28,.10) 40%, rgba(28,28,28,.62));
}
.idp-curso__cuerpo{ padding:24px 24px 28px; }
.idp-curso h3{
  font-family:var(--idp-display); font-weight:700; font-size:22px;
  text-transform:uppercase; margin-bottom:10px;
}
.idp-curso__datos{ border-top:1px solid #E4E4E4; margin-top:16px; padding-top:14px; font-size:13.4px; }
.idp-curso__datos div{ display:flex; justify-content:space-between; padding:4px 0; color:var(--idp-gris); }
.idp-curso__datos b{ color:var(--idp-negro); font-family:var(--idp-ui); font-weight:600; }

/* =========================================================
   5. Vinetas inclinadas para listas
   ========================================================= */
.idp-lista{ list-style:none; margin:0; padding:0; }
.idp-lista li{
  padding:13px 0 13px 26px;
  border-bottom:1px solid #E1E1E1;
  font-size:15px;
  position:relative;
}
.idp-lista li::before{
  content:""; position:absolute; left:0; top:20px;
  width:11px; height:11px; background:var(--idp-rojo);
  transform:skewX(var(--idp-shear));
}
.has-idp-negro-background-color .idp-lista li{ border-bottom-color:#333; }

/* =========================================================
   6. Marco de foto con esquina roja
   ========================================================= */
.idp-marco{ position:relative; aspect-ratio:4/3; overflow:hidden; }
.idp-marco img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; }
.idp-marco::after{
  content:""; position:absolute; left:-14px; bottom:-14px;
  width:120px; height:120px; background:var(--idp-rojo);
  transform:skewX(var(--idp-shear)); z-index:2;
}

/* =========================================================
   7. Franjas diagonales de fondo (patron derivado del manual)
   ========================================================= */
.idp-franjas{ position:relative; overflow:hidden; }
.idp-franjas::before{
  content:""; position:absolute; top:-20%; right:6%; width:62px; height:140%;
  background:var(--idp-rojo); opacity:.9;
  transform:skewX(var(--idp-shear)); pointer-events:none;
}
.idp-franjas::after{
  content:""; position:absolute; top:-20%; right:3%; width:15px; height:140%;
  background:var(--idp-rojo-osc);
  transform:skewX(var(--idp-shear)); pointer-events:none;
}
.idp-franjas > *{ position:relative; z-index:2; }

/* =========================================================
   8. Contador regresivo
   ========================================================= */
.idp-cuenta{
  background:#242424; color:var(--idp-blanco);
  border-left:6px solid var(--idp-rojo);
  padding:26px 24px 22px;
}
.idp-cuenta__reloj{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; text-align:center; }
.idp-cuenta__reloj b{
  display:block; font-family:var(--idp-display); font-weight:700;
  font-size:34px; line-height:1; color:var(--idp-rojo);
  font-variant-numeric:tabular-nums;
}
.idp-cuenta__reloj small{
  font-family:var(--idp-ui); font-weight:600; font-size:10px;
  color:var(--idp-gris); letter-spacing:.08em;
}

/* =========================================================
   9. Formularios (Fluent Forms)
   ========================================================= */
.fluentform .ff-el-input--label label{
  font-family:var(--idp-ui); font-weight:600; font-size:12.5px;
}
.fluentform input[type=text],
.fluentform input[type=email],
.fluentform input[type=tel],
.fluentform select{
  border:1.5px solid #D8D8D8; border-radius:0;
  padding:12px; font-family:var(--idp-texto); font-size:14.5px;
}
.fluentform input:focus, .fluentform select:focus{ border-color:var(--idp-rojo); outline:none; }
.fluentform .ff-btn-submit{
  background:var(--idp-rojo); border-radius:0; border:none;
  font-family:var(--idp-ui); font-weight:700; font-size:14px;
  padding:15px 32px; width:100%;
}
.fluentform .ff-btn-submit:hover{ background:var(--idp-rojo-osc); }

/* =========================================================
   10. Accesibilidad
   El rojo #D91E36 no alcanza contraste AA sobre blanco en texto
   pequeno. Solo para titulares grandes, botones y acentos.
   ========================================================= */
:focus-visible{ outline:3px solid var(--idp-rojo); outline-offset:3px; }

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
}