@import url('https://fonts.googleapis.com/css2?family=Jost:wght@400;500;600;700&display=swap');


/* =========================================================
   HOGAR Y CULTURA
   ACTIVIDADES Y EVIDENCIAS
   Design System HYC v1.2 · UI unificada + color semántico
========================================================= */

:root {

  /* -------------------------------------------------------
     MARCA
  ------------------------------------------------------- */ 

  --hyc-mint-50:  #EAF7F2;
  --hyc-mint-100: #D4EFE5;
  --hyc-mint-200: #B8E4D3;
  --hyc-mint-400: #86D1B7;
  --hyc-mint-500: #73C7B0;
  --hyc-mint-600: #5AB39A;
  --hyc-mint-700: #458E7B;
  --hyc-mint-800: #346A5D;
  --hyc-mint-900: #1F423A;

  --hyc-navy: #202C3B;


  /* -------------------------------------------------------
     SUPERFICIES
  ------------------------------------------------------- */

  --hyc-bg-app:      #FAFBFB;
  --hyc-bg-surface:  #FFFFFF;
  --hyc-bg-subtle:   #EEF4F2;
  --hyc-bg-muted:    #F1F2F3;
  --hyc-bg-context:  #EAF7F2;
  --hyc-bg-disabled: #EDEFEF;


  /* -------------------------------------------------------
     TEXTO
  ------------------------------------------------------- */

  --hyc-text-strong:   #36373A;
  --hyc-text-body:     #65666A;
  --hyc-text-on-dark:  #FFFFFF;
  --hyc-text-disabled: #85868B;
  --hyc-text-brand:    #346A5D;


  /* -------------------------------------------------------
     ACCIONES
  ------------------------------------------------------- */

  --hyc-action:        #346A5D;
  --hyc-action-hover:  #1F423A;
  --hyc-action-soft:   #EAF7F2;
  --hyc-action-border: #346A5D;


  /* -------------------------------------------------------
     SEMÁNTICOS
  ------------------------------------------------------- */

  --hyc-success-bg:     #EAF7F2;
  --hyc-success-border: #B8E4D3;
  --hyc-success-text:   #1F6B4E;

  --hyc-success-file-bg:     #F3FBF6;
  --hyc-success-file-border: #A9D8BF;

  --hyc-warning-bg:     #FBF3DF;
  --hyc-warning-border: #E8D6A6;
  --hyc-warning-text:   #7A5C14;

  --hyc-error-bg:     #FBEDEA;
  --hyc-error-border: #EBC7BF;
  --hyc-error-text:   #96412F;

	--hyc-info-text: #2457A6;
	--hyc-info-bg: #EAF1FF;
	--hyc-info-border: #7EA6E0;


  /* -------------------------------------------------------
     BORDES
  ------------------------------------------------------- */

  --hyc-border-subtle:
    rgba(101, 102, 106, 0.10);

  --hyc-border-field:
    rgba(101, 102, 106, 0.28);

  --hyc-border-control:
    rgba(101, 102, 106, 0.35);

  --hyc-border-neutral:
    rgba(101, 102, 106, 0.24);

  --hyc-border-upload:
    #5AB39A;


  /* -------------------------------------------------------
     TIPOGRAFÍA
  ------------------------------------------------------- */

  --hyc-font:
    'Jost',
    system-ui,
    -apple-system,
    'Segoe UI',
    sans-serif;

  --hyc-fs-display: 44px;
  --hyc-fs-success: 32px;
  --hyc-fs-title:   30px;
  --hyc-fs-section: 20px;
  --hyc-fs-action:  16px;
  --hyc-fs-body:    16px;
  --hyc-fs-body-alt:15px;
  --hyc-fs-label:   14px;
  --hyc-fs-help:    13px;
  --hyc-fs-eyebrow: 11px;
  --hyc-fs-badge:   11px;

  --hyc-fw-regular:  400;
  --hyc-fw-medium:   500;
  --hyc-fw-semibold: 600;
  --hyc-fw-bold:     700;

  --hyc-lh-display: 1.12;
  --hyc-lh-title:   1.20;
  --hyc-lh-heading: 1.35;
  --hyc-lh-tight:   1.45;
  --hyc-lh-ui:      1.50;
  --hyc-lh-body:    1.60;

  --hyc-ls-title:   -0.01em;
  --hyc-ls-eyebrow:  0.14em;
  --hyc-ls-meta:     0.12em;
  --hyc-ls-badge:    0.06em;


  /* -------------------------------------------------------
     ESPACIADO
  ------------------------------------------------------- */

  --hyc-space-1:  4px;
  --hyc-space-2:  8px;
  --hyc-space-3: 10px;
  --hyc-space-4: 12px;
  --hyc-space-5: 16px;
  --hyc-space-6: 20px;
  --hyc-space-7: 24px;
  --hyc-space-8: 32px;
  --hyc-space-9: 48px;
  --hyc-space-10:56px;

  --hyc-gap-field: 12px;
  --hyc-gap-inner: 16px;
  --hyc-gap-block: 24px;


  /* -------------------------------------------------------
     CONTENEDORES
  ------------------------------------------------------- */

  --hyc-container:      620px;
  --hyc-container-wide: 760px;

  --hyc-page-padding-x: 20px;
  --hyc-page-padding-y: 24px;

  --hyc-card-padding:    18px;
  --hyc-card-padding-sm: 16px;


  /* -------------------------------------------------------
     RADIOS
  ------------------------------------------------------- */

  --hyc-radius-field:  10px;
  --hyc-radius-panel:  12px;
  --hyc-radius-card:   16px;
  --hyc-radius-screen: 24px;
  --hyc-radius-pill:   999px;


  /* -------------------------------------------------------
     CONTROLES
  ------------------------------------------------------- */

  --hyc-control-h:       52px;
  --hyc-btn-h:           54px;
  --hyc-btn-h-secondary: 52px;
  --hyc-btn-h-inline:    46px;
  --hyc-row-h:           56px;
  --hyc-tap-min:         44px;


  /* -------------------------------------------------------
     SOMBRAS
  ------------------------------------------------------- */

  --hyc-shadow-card:
    0 1px 2px rgba(15, 16, 18, 0.04);

  --hyc-shadow-elevated:
    0 2px 6px rgba(15, 16, 18, 0.05);

  --hyc-shadow-screen:
    0 18px 44px rgba(15, 16, 18, 0.10);

  --hyc-focus-ring:
    0 0 0 3px rgba(115, 199, 176, 0.32);


  /* -------------------------------------------------------
     MOTION
  ------------------------------------------------------- */

  --hyc-ease:
    cubic-bezier(0.2, 0.6, 0.2, 1);

  --hyc-duration:
    220ms;


  /* -------------------------------------------------------
     ALIASES LEGACY
     Se conservan por compatibilidad
  ------------------------------------------------------- */

  --mint-50:  var(--hyc-mint-50);
  --mint-100: var(--hyc-mint-100);
  --mint-300: var(--hyc-mint-400);
  --mint-500: var(--hyc-mint-500);
  --mint-600: var(--hyc-mint-600);
  --mint-700: var(--hyc-mint-700);
  --mint-900: var(--hyc-mint-900);

  --mint-deep:
    var(--hyc-action);

  --graphite-50:  #F4F4F5;
  --graphite-100: #E6E6E8;
  --graphite-300: #A4A5AA;
  --graphite-400: #85868B;
  --graphite-500: #65666A;
  --graphite-600: #4D4E52;
  --graphite-700: #36373A;
  --graphite-900: #0F1012;

  --white: #FFFFFF;

  --bone:
    var(--hyc-bg-app);

  --haze:
    var(--hyc-bg-subtle);

  --danger:
    var(--hyc-error-text);

  --border-subtle:
    var(--hyc-border-subtle);

  --border-default:
    var(--hyc-border-field);

  --shadow-sm:
    var(--hyc-shadow-card);

  --shadow-md:
    var(--hyc-shadow-screen);

  --focus:
    var(--hyc-focus-ring);

  --radius-md:
    var(--hyc-radius-field);

  --radius-lg:
    var(--hyc-radius-panel);

  --radius-xl:
    var(--hyc-radius-card);

  --radius-pill:
    var(--hyc-radius-pill);

  --ease:
    var(--hyc-ease);
}



/* =========================================================
   01. RESET / BASE
========================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}


html {
  min-height: 100%;

  background:
    var(--hyc-bg-app);
}


body {
  margin: 0;

  min-height: 100vh;

  background:
    var(--hyc-bg-app);

  color:
    var(--hyc-text-strong);

  font-family:
    var(--hyc-font);

  font-size:
    var(--hyc-fs-body);

  line-height:
    var(--hyc-lh-body);

  -webkit-font-smoothing:
    antialiased;

  -webkit-text-size-adjust:
    100%;
}


button,
input,
select,
textarea {
  font: inherit;
}


button {
  -webkit-tap-highlight-color:
    transparent;
}


.hidden {
  display: none !important;
}


:focus-visible {
  outline: none;
}



/* =========================================================
   02. APP SHELL / PANTALLAS
========================================================= */

.app-shell {
  width: 100%;
  min-height: 100vh;

  margin: 0 auto;

  display: flex;
  justify-content: center;
  align-items: flex-start;

  background:
    var(--hyc-bg-app);
}


.app-screen {
  display: none;

  width: 100%;
  max-width:
    var(--hyc-container);

  min-height: 100vh;

  margin: 0 auto;
  padding: 0;

  background:
    var(--hyc-bg-app);

  box-shadow: none;
  border-radius: 0;
}


.app-screen.screen-active {
  display: flex;
  flex-direction: column;
}


.form-container {
  width: 100%;

  padding:
    var(--hyc-page-padding-y)
    var(--hyc-page-padding-x)
    var(--hyc-space-8);
}



/* =========================================================
   03. HEADER DE PANTALLAS
========================================================= */

.screen-header {
  position: relative;

  width: 100%;
  min-height: 72px;

  margin: 0;

  padding:
    14px
    16px;

  display: flex;
  align-items: center;
  justify-content: flex-start;

  gap:
    var(--hyc-space-4);

  background:
    var(--hyc-bg-surface);

  border-bottom:
    1px solid
    var(--hyc-border-subtle);
}


.back-button {
  width:
    var(--hyc-tap-min);

  height:
    var(--hyc-tap-min);

  flex: none;

  padding: 0;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  color:
    var(--hyc-text-strong);

  background:
    var(--hyc-bg-surface);

  border:
    1.5px solid
    rgba(101, 102, 106, 0.18);

  border-radius:
    var(--hyc-radius-pill);

  font-size: 27px;
  font-weight: 400;
  line-height: 0.8;

  cursor: pointer;

  transition:
    background
    var(--hyc-duration)
    var(--hyc-ease);
}


.back-button:hover {
  background:
    var(--hyc-action-soft);
}


.back-button:focus-visible {
  border-color:
    var(--hyc-action);

  box-shadow:
    var(--hyc-focus-ring);
}


.step-label {
  position: absolute;

  left: 50%;

  transform:
    translateX(-50%);

  color:
    var(--hyc-text-strong);

  font-size:
    var(--hyc-fs-label);

  font-weight:
    var(--hyc-fw-semibold);

  line-height: 1.4;

  white-space: nowrap;
}



/* =========================================================
   04. TIPOGRAFÍA GENERAL
========================================================= */

.eyebrow {
  margin: 0;

  color:
    var(--hyc-text-brand);

  font-size:
    var(--hyc-fs-eyebrow);

  font-weight:
    var(--hyc-fw-semibold);

  line-height: 1.4;

  letter-spacing:
    var(--hyc-ls-eyebrow);

  text-transform:
    uppercase;
}


h1,
h2 {
  margin:
    var(--hyc-space-2)
    0
    0;

  color:
    var(--hyc-text-strong);

  font-size:
    var(--hyc-fs-title);

  font-weight:
    var(--hyc-fw-regular);

  line-height:
    var(--hyc-lh-title);

  letter-spacing:
    var(--hyc-ls-title);
}


.mint-rule {
  width: 48px;
  height: 2px;

  margin:
    14px
    0
    0;

  background:
    var(--hyc-mint-500);
}


.lead-copy,
.form-intro {
  margin:
    var(--hyc-space-5)
    0
    0;

  color:
    var(--hyc-text-body);

  font-size:
    var(--hyc-fs-body);

  font-weight:
    var(--hyc-fw-regular);

  line-height:
    var(--hyc-lh-body);

  text-wrap: pretty;
}


.form-intro {
  margin-bottom:
    var(--hyc-space-7);
}


.subheading {
  margin: 0;

  color:
    var(--hyc-text-strong);

  font-size:
    var(--hyc-fs-section);

  font-weight:
    var(--hyc-fw-semibold);

  line-height: 1.25;
}



/* =========================================================
   05. BOTONES
========================================================= */

.btn {
  width: 100%;

  min-height:
    var(--hyc-btn-h);

  padding:
    0
    var(--hyc-space-7);

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    var(--hyc-space-2);

  border: none;

  border-radius:
    var(--hyc-radius-pill);

  font-family: inherit;

  font-size:
    var(--hyc-fs-action);

  font-weight:
    var(--hyc-fw-semibold);

  line-height: 1;

  cursor: pointer;

  transition:
    background
      var(--hyc-duration)
      var(--hyc-ease),
    border-color
      var(--hyc-duration)
      var(--hyc-ease);
}


.btn-primary {
  background:
    var(--hyc-action);

  color:
    var(--hyc-text-on-dark);
}


.btn-primary:hover:not(:disabled) {
  background:
    var(--hyc-action-hover);
}


.btn-secondary {
  min-height:
    var(--hyc-btn-h-secondary);

  background:
    var(--hyc-bg-surface);

  color:
    var(--hyc-action);

  border:
    1.5px solid
    var(--hyc-action-border);

  font-size:
    var(--hyc-fs-body);
}


.btn-secondary:hover:not(:disabled) {
  background:
    var(--hyc-action-soft);
}


.btn + .btn-secondary {
  margin-top:
    var(--hyc-space-4);
}


.btn:disabled,
.btn[aria-disabled="true"] {
  background:
    var(--hyc-bg-disabled);

  color:
    var(--hyc-text-disabled);

  border:
    1px solid
    rgba(101, 102, 106, 0.18);

  cursor:
    not-allowed;
}


.btn:focus-visible,
.text-button:focus-visible,
.program-card:focus-visible,
.activity-materials-button:focus-visible,
.evidence-upload-button:focus-visible {
  border-color:
    var(--hyc-action);

  box-shadow:
    var(--hyc-focus-ring);
}


.text-button {
  width: auto;

  min-height:
    var(--hyc-tap-min);

  padding:
    0
    var(--hyc-space-1);

  border: 0;

  background:
    transparent;

  color:
    var(--hyc-action);

  font-size:
    var(--hyc-fs-body-alt);

  font-weight:
    var(--hyc-fw-semibold);

  text-decoration:
    underline;

  text-underline-offset:
    3px;

  cursor: pointer;
}


.text-button-small {
  margin-top:
    var(--hyc-space-2);

  font-size:
    var(--hyc-fs-help);
}



/* =========================================================
   06. FORMULARIOS
========================================================= */

.field {
  display: block;

  margin-bottom:
    var(--hyc-gap-inner);
}


label {
  display: block;

  margin-bottom:
    6px;

  color:
    var(--hyc-text-strong);

  font-size:
    var(--hyc-fs-label);

  font-weight:
    var(--hyc-fw-semibold);

  line-height: 1.4;
}


.required {
  color:
    var(--hyc-error-text);
}


.optional-label {
  margin-left:
    4px;

  color:
    var(--hyc-text-body);

  font-size:
    var(--hyc-fs-help);

  font-weight:
    var(--hyc-fw-regular);
}


input,
select,
textarea {
  width: 100%;

  min-height:
    var(--hyc-control-h);

  padding:
    0
    14px;

  color:
    var(--hyc-text-strong);

  background:
    var(--hyc-bg-surface);

  border:
    1.5px solid
    var(--hyc-border-field);

  border-radius:
    var(--hyc-radius-field);

  font-family: inherit;

  font-size:
    var(--hyc-fs-body);

  outline: none;

  transition:
    border-color
      var(--hyc-duration)
      var(--hyc-ease),
    box-shadow
      var(--hyc-duration)
      var(--hyc-ease);
}


select {
  padding-right:
    44px;
}


textarea {
  min-height:
    96px;

  padding:
    var(--hyc-space-4)
    14px;

  line-height:
    var(--hyc-lh-ui);

  resize:
    vertical;
}


input::placeholder,
textarea::placeholder {
  color:
    var(--hyc-text-disabled);
}


input:focus,
select:focus,
textarea:focus {
  border-color:
    var(--hyc-action);

  box-shadow:
    var(--hyc-focus-ring);
}


input.field-invalid,
select.field-invalid,
textarea.field-invalid {
  border-color:
    var(--hyc-error-text);
}


.field-helper {
  margin-top:
    var(--hyc-space-2);

  color:
    var(--hyc-text-body);

  font-size:
    var(--hyc-fs-help);

  line-height:
    var(--hyc-lh-ui);
}


.field-error {
  min-height:
    18px;

  margin-top:
    var(--hyc-space-2);

  color:
    var(--hyc-error-text);

  font-size:
    var(--hyc-fs-help);

  line-height:
    var(--hyc-lh-ui);
}


.general-error {
  margin:
    0
    0
    var(--hyc-space-5);

  padding:
    var(--hyc-space-4)
    14px;

  color:
    #7A3325;

  background:
    var(--hyc-error-bg);

  border:
    1px solid
    var(--hyc-error-border);

  border-radius:
    var(--hyc-radius-field);

  font-size:
    var(--hyc-fs-label);

  line-height:
    var(--hyc-lh-tight);
}


.field-row,
.results-age-grid {
  display: grid;

  grid-template-columns:
    1fr
    1fr;

  gap:
    var(--hyc-gap-field);
}


.section-divider {
  height: 1px;

  margin:
    var(--hyc-space-7)
    0;

  background:
    var(--hyc-border-subtle);
}



/* =========================================================
   07. TARJETAS DE CONTEXTO
========================================================= */

.returning-card,
.summary-card {
  padding:
    var(--hyc-card-padding-sm);

  margin:
    0
    0
    var(--hyc-space-7);

  background:
    var(--hyc-bg-context);

  border:
    1px solid
    var(--hyc-success-border);

  border-radius:
    var(--hyc-radius-panel);

  box-shadow:
    none;

  color:
    var(--hyc-action);

  font-size:
    var(--hyc-fs-help);

  line-height:
    var(--hyc-lh-ui);
}


.returning-title {
  margin-bottom:
    var(--hyc-space-1);

  color:
    var(--hyc-mint-900);

  font-size:
    var(--hyc-fs-label);

  font-weight:
    var(--hyc-fw-bold);
}


.material-card {
  margin-bottom:
    var(--hyc-space-4);

  padding:
    var(--hyc-card-padding-sm);

  background:
    var(--hyc-bg-surface);

  border:
    1px solid
    var(--hyc-border-subtle);

  border-radius:
    var(--hyc-radius-card);

  box-shadow:
    var(--hyc-shadow-card);

  color:
    var(--hyc-text-body);
}


.material-card strong {
  color:
    var(--hyc-text-strong);

  font-size:
    var(--hyc-fs-body);

  font-weight:
    var(--hyc-fw-semibold);
}


.material-card .form-intro {
  margin:
    var(--hyc-space-1)
    0
    var(--hyc-space-4);

  font-size:
    var(--hyc-fs-label);

  line-height:
    var(--hyc-lh-ui);
}



/* =========================================================
   08. SELECCIÓN DE PROGRAMA
========================================================= */

.program-options {
  display: flex;
  flex-direction: column;

  gap:
    var(--hyc-space-4);
}


.program-card {
  position: relative;

  width: 100%;

  min-height:
    88px;

  padding:
    var(--hyc-space-5)
    52px
    var(--hyc-space-5)
    var(--hyc-space-5);

  display: flex;
  flex-direction: column;
  justify-content: center;

  gap:
    var(--hyc-space-1);

  text-align:
    left;

  background:
    var(--hyc-bg-surface);

  border:
    1.5px solid
    rgba(101, 102, 106, 0.16);

  border-radius:
    var(--hyc-radius-card);

  box-shadow:
    var(--hyc-shadow-card);

  cursor: pointer;

  transition:
    background
      var(--hyc-duration)
      var(--hyc-ease);
}


.program-card:hover {
  background:
    var(--hyc-bg-context);
}


.program-card-title {
  color:
    var(--hyc-text-strong);

  font-size:
    var(--hyc-fs-action);

  font-weight:
    var(--hyc-fw-semibold);
}


.program-card-description {
  color:
    var(--hyc-text-body);

  font-size:
    var(--hyc-fs-label);
}


.program-card-arrow {
  position: absolute;

  right:
    var(--hyc-space-5);

  top: 50%;

  transform:
    translateY(-50%);

  color:
    var(--hyc-action);

  font-size:
    20px;
}



/* =========================================================
   09. CURSOS / ACORDEONES
========================================================= */

.course-groups {
  display:
    flex;

  flex-direction:
    column;

  gap:
    var(--hyc-space-3);
}


.course-category {
  overflow:
    hidden;

  background:
    var(--hyc-bg-surface);

  border:
    1.5px solid
    var(--hyc-border-field);

  border-radius:
    var(--hyc-radius-field);
}


.course-category-button {
  width: 100%;

  min-height:
    var(--hyc-row-h);

  padding:
    0
    14px;

  border: none;

  background:
    var(--hyc-bg-surface);

  color:
    var(--hyc-text-strong);

  font-size:
    var(--hyc-fs-body);

  font-weight:
    var(--hyc-fw-regular);

  text-align:
    left;

  cursor:
    pointer;
}


.course-category-button:hover,
.course-category.open
.course-category-button {
  background:
    var(--hyc-bg-context);
}


.course-options {
  display:
    none;

  padding:
    0
    14px
    14px;
}


.course-category.open
.course-options {
  display:
    flex;

  flex-direction:
    column;

  gap:
    var(--hyc-space-3);
}


.course-option {
  min-height:
    var(--hyc-row-h);

  padding:
    0
    14px;

  display:
    flex;

  align-items:
    center;

  gap:
    var(--hyc-space-4);

  border:
    1.5px solid
    var(--hyc-border-field);

  border-radius:
    var(--hyc-radius-field);

  background:
    var(--hyc-bg-surface);

  color:
    var(--hyc-text-strong);

  font-size:
    var(--hyc-fs-body);

  cursor:
    pointer;
}


.course-option:hover {
  background:
    var(--hyc-bg-context);
}


.course-option input {
  width: 24px;
  height: 24px;

  min-height: auto;

  flex: none;

  accent-color:
    var(--hyc-action);
}



/* =========================================================
   10. CHECKBOXES
========================================================= */

.checkbox-list {
  display:
    flex;

  flex-direction:
    column;

  gap:
    var(--hyc-space-3);
}


.check-option {
  min-height:
    var(--hyc-row-h);

  padding:
    0
    14px;

  display:
    flex;

  align-items:
    center;

  gap:
    var(--hyc-space-4);

  background:
    var(--hyc-bg-surface);

  border:
    1.5px solid
    var(--hyc-border-field);

  border-radius:
    var(--hyc-radius-field);

  color:
    var(--hyc-text-strong);

  font-size:
    var(--hyc-fs-body);

  cursor:
    pointer;
}


.check-option:hover {
  background:
    var(--hyc-bg-app);
}


.check-option:has(input:checked) {
  background:
    var(--hyc-bg-context);

  border-color:
    var(--hyc-action-border);

  font-weight:
    var(--hyc-fw-semibold);
}


.check-option input {
  width: 24px;
  height: 24px;

  min-height: auto;

  flex: none;

  accent-color:
    var(--hyc-action);
}



/* =========================================================
   11. REVISIÓN
========================================================= */

.review-card {
  padding: 0;

  margin-bottom:
    var(--hyc-space-7);

  overflow:
    hidden;

  background:
    var(--hyc-bg-surface);

  border:
    1px solid
    var(--hyc-border-subtle);

  border-radius:
    var(--hyc-radius-card);

  box-shadow:
    var(--hyc-shadow-card);
}


.review-section {
  padding:
    var(--hyc-space-5)
    var(--hyc-card-padding);

  display:
    flex;

  flex-direction:
    column;

  gap:
    var(--hyc-space-1);
}


.review-section +
.review-section {
  border-top:
    1px solid
    var(--hyc-border-subtle);
}


.review-label {
  color:
    var(--hyc-text-body);

  font-size:
    var(--hyc-fs-eyebrow);

  font-weight:
    var(--hyc-fw-semibold);

  letter-spacing:
    var(--hyc-ls-meta);

  text-transform:
    uppercase;
}


.review-value {
  color:
    var(--hyc-text-strong);

  font-size:
    var(--hyc-fs-body);

  line-height:
    var(--hyc-lh-ui);
}


.review-edit-button {
  width: auto;

  margin:
    var(--hyc-space-4)
    auto
    0;

  text-align:
    center;
}



/* =========================================================
   12. MIS ACTIVIDADES
========================================================= */

.my-activities-list {
  display:
    flex;

  flex-direction:
    column;

  gap:
    14px;

  margin-top:
    0;
}


.activity-card {
  min-height:
    248px;

  padding:
    var(--hyc-card-padding-sm);

  display:
    flex;

  flex-direction:
    column;

  gap:
    var(--hyc-space-4);

  background:
    var(--hyc-bg-surface);

  border:
    1px solid
    var(--hyc-border-subtle);

  border-radius:
    var(--hyc-radius-card);

  box-shadow:
    var(--hyc-shadow-card);
}


.activity-card-top {
  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    var(--hyc-space-3);

  margin:
    0;
}


.activity-folio {
  color:
    var(--hyc-text-body);

  font-size:
    var(--hyc-fs-help);

  font-weight:
    var(--hyc-fw-semibold);

  letter-spacing:
    0.04em;
}


.activity-status {
  min-height:
    26px;

  padding:
    0
    var(--hyc-space-3);

  display:
    inline-flex;

  align-items:
    center;

  border-radius:
    var(--hyc-radius-pill);

  color:
    var(--hyc-info-text);

  background:
    var(--hyc-info-bg);

  border:
    1px solid
    var(--hyc-info-border);

  font-size:
    var(--hyc-fs-badge);

  font-weight:
    var(--hyc-fw-bold);

  line-height:
    1;

  letter-spacing:
    var(--hyc-ls-badge);

  text-transform:
    uppercase;

  white-space:
    nowrap;
}


.activity-status.status-pending {
  color:
    var(--hyc-warning-text);

  background:
    var(--hyc-warning-bg);

  border-color:
    var(--hyc-warning-border);
}


.activity-status.status-registered {
  /* REGISTRADA = estado informativo, no de finalización */
  color:
    var(--hyc-info-text);

  background:
    var(--hyc-info-bg);

  border-color:
    var(--hyc-info-border);
}


/* Contexto de la voluntaria: neutro, no estado de éxito */
#my-activities-volunteer.summary-card {
  color:
    var(--hyc-text-strong);

  background:
    var(--hyc-bg-surface);

  border-color:
    var(--hyc-border-neutral);
}

#my-activities-volunteer.summary-card strong {
  color:
    var(--hyc-text-strong);
}


/* Estado vacío / informativo */
#my-activities-empty.summary-card {
  color:
    var(--hyc-info-text);

  background:
    var(--hyc-info-bg);

  border-color:
    var(--hyc-info-border);
}


.activity-program {
  color:
    var(--hyc-text-brand);

  font-size:
    var(--hyc-fs-eyebrow);

  font-weight:
    var(--hyc-fw-semibold);

  letter-spacing:
    var(--hyc-ls-meta);

  text-transform:
    uppercase;
}


.activity-name {
  margin:
    var(--hyc-space-1)
    0
    0;

  color:
    var(--hyc-text-strong);

  font-size:
    var(--hyc-fs-action);

  font-weight:
    var(--hyc-fw-semibold);

  line-height:
    var(--hyc-lh-heading);
}


.activity-meta {
  margin:
    0;

  color:
    var(--hyc-text-body);

  font-size:
    var(--hyc-fs-body-alt);

  line-height:
    var(--hyc-lh-ui);
}


.activity-meta strong {
  color:
    var(--hyc-text-strong);

  font-weight:
    var(--hyc-fw-semibold);
}


.activity-materials-button {
  width: 100%;

  min-height:
    var(--hyc-btn-h-inline);

  margin-top:
    auto;

  padding:
    0
    var(--hyc-space-5);

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  background:
    var(--hyc-bg-surface);

  color:
    var(--hyc-action);

  border:
    1.5px solid
    var(--hyc-action-border);

  border-radius:
    var(--hyc-radius-pill);

  font-size:
    var(--hyc-fs-body-alt);

  font-weight:
    var(--hyc-fw-semibold);

  cursor:
    pointer;
}


.activity-materials-button:hover {
  background:
    var(--hyc-action-soft);
}


.activity-processing {
  padding:
    var(--hyc-space-4);

  background:
    var(--hyc-bg-muted);

  border-radius:
    var(--hyc-radius-field);

  color:
    var(--hyc-text-disabled);

  font-size:
    var(--hyc-fs-help);

  text-align:
    center;
}



/* =========================================================
   13. DETALLE DE ACTIVIDAD
========================================================= */

.activity-detail-folio {
  margin-top:
    var(--hyc-space-2);

  color:
    var(--hyc-text-body);

  font-size:
    var(--hyc-fs-help);

  font-weight:
    var(--hyc-fw-semibold);

  letter-spacing:
    0.04em;
}


.activity-detail-content {
  margin-top:
    var(--hyc-space-7);

  padding:
    0;

  overflow:
    hidden;

  background:
    var(--hyc-bg-surface);

  border:
    1px solid
    var(--hyc-border-subtle);

  border-radius:
    var(--hyc-radius-card);

  box-shadow:
    var(--hyc-shadow-card);
}


.detail-row {
  padding:
    var(--hyc-space-5)
    var(--hyc-card-padding);

  display:
    flex;

  flex-direction:
    column;

  gap:
    var(--hyc-space-1);
}


.detail-row +
.detail-row {
  border-top:
    1px solid
    var(--hyc-border-subtle);
}


.detail-label {
  color:
    var(--hyc-text-body);

  font-size:
    var(--hyc-fs-eyebrow);

  font-weight:
    var(--hyc-fw-semibold);

  letter-spacing:
    var(--hyc-ls-meta);

  text-transform:
    uppercase;
}


.detail-value {
  color:
    var(--hyc-text-strong);

  font-size:
    var(--hyc-fs-body);

  line-height:
    var(--hyc-lh-ui);
}



/* =========================================================
   14. RESULTADOS
========================================================= */

.results-intro {
  margin-bottom:
    var(--hyc-space-7);
}


.results-helper {
  margin-top:
    calc(
      var(--hyc-space-2) * -1
    );

  margin-bottom:
    var(--hyc-space-7);
}


.results-age-grid {
  margin-bottom:
    var(--hyc-space-1);
}


.results-supports {
  display:
    flex;

  flex-direction:
    column;

  gap:
    var(--hyc-space-4);
}


.result-support-card {
  padding:
    0;

  overflow:
    hidden;

  background:
    var(--hyc-bg-surface);

  border:
    1px solid
    var(--hyc-border-subtle);

  border-radius:
    var(--hyc-radius-card);

  box-shadow:
    var(--hyc-shadow-card);
}


.result-support-title {
  margin:
    0;

  padding:
    var(--hyc-space-4)
    var(--hyc-card-padding-sm);

  display:
    flex;

  align-items:
    center;

  gap:
    var(--hyc-space-3);

  background:
    var(--hyc-bg-subtle);

  border-bottom:
    1px solid
    var(--hyc-border-subtle);

  color:
    var(--hyc-text-strong);

  font-size:
    var(--hyc-fs-body);

  font-weight:
    var(--hyc-fw-semibold);

  line-height:
    1.4;
}


.result-support-title::before {
  content: "";

  width:
    8px;

  height:
    8px;

  flex:
    none;

  border-radius:
    var(--hyc-radius-pill);

  background:
    var(--hyc-mint-600);
}


.result-support-card
.field {
  margin:
    0;

  padding:
    var(--hyc-card-padding-sm);
}


.result-support-card
.field +
.field {
  padding-top:
    0;
}


.result-support-observation {
  margin-bottom:
    0 !important;
}



/* =========================================================
   15. EVIDENCIAS
========================================================= */

.evidence-progress-card {
  padding:
    14px
    var(--hyc-card-padding-sm);

  margin:
    var(--hyc-space-7)
    0;

  display:
    flex;

  align-items:
    center;

  gap:
    var(--hyc-space-4);

  background:
    var(--hyc-bg-surface);

  border:
    1px solid
    var(--hyc-border-subtle);

  border-radius:
    var(--hyc-radius-panel);

  color:
    var(--hyc-text-strong);

  font-size:
    var(--hyc-fs-label);

  font-weight:
    var(--hyc-fw-semibold);
}


.evidence-progress-complete {
  color:
    var(--hyc-mint-900);

  background:
    var(--hyc-success-bg);

  border-color:
    var(--hyc-success-border);
}


.evidence-list {
  display:
    flex;

  flex-direction:
    column;

  gap:
    var(--hyc-space-4);

  margin-bottom:
    var(--hyc-space-7);
}


.evidence-requirement-card {
  min-height:
    156px;

  padding:
    var(--hyc-card-padding-sm);

  display:
    flex;

  flex-direction:
    column;

  gap:
    var(--hyc-space-4);

  background:
    var(--hyc-bg-surface);

  border:
    1.5px solid
    rgba(101, 102, 106, 0.12);

  border-radius:
    var(--hyc-radius-card);

  box-shadow:
    var(--hyc-shadow-card);
}


.evidence-card-header {
  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    var(--hyc-space-3);

  margin:
    0;
}


.evidence-card-title {
  color:
    var(--hyc-text-strong);

  font-size:
    var(--hyc-fs-body);

  font-weight:
    var(--hyc-fw-semibold);

  line-height:
    var(--hyc-lh-heading);
}


.evidence-card-status {
  display:
    flex;

  align-items:
    center;

  gap:
    var(--hyc-space-2);

  margin-top:
    var(--hyc-space-1);

  padding:
    0;

  background:
    transparent;

  color:
    var(--hyc-warning-text);

  font-size:
    var(--hyc-fs-label);

  line-height:
    1.4;
}


.evidence-card-status.is-complete {
  color:
    var(--hyc-success-text);

  background:
    transparent;

  font-weight:
    var(--hyc-fw-regular);
}


.evidence-required-badge,
.evidence-optional-badge {
  min-height:
    26px;

  padding:
    0
    var(--hyc-space-3);

  display:
    inline-flex;

  align-items:
    center;

  flex:
    none;

  border-radius:
    var(--hyc-radius-pill);

  font-size:
    var(--hyc-fs-badge);

  font-weight:
    var(--hyc-fw-bold);

  line-height:
    1;

  letter-spacing:
    var(--hyc-ls-badge);

  text-transform:
    uppercase;

  white-space:
    nowrap;
}


.evidence-required-badge {
  color:
    var(--hyc-success-text);

  background:
    var(--hyc-success-bg);

  border:
    1px solid
    var(--hyc-success-border);
}


.evidence-optional-badge {
  color:
    #4D4E52;

  background:
    var(--hyc-bg-muted);

  border:
    1px solid
    rgba(101, 102, 106, 0.18);
}


.evidence-upload-button {
  width:
    100%;

  min-height:
    var(--hyc-control-h);

  margin-top:
    auto;

  padding:
    0
    var(--hyc-space-5);

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    var(--hyc-space-2);

  background:
    var(--hyc-bg-surface);

  color:
    var(--hyc-action);

  border:
    1.5px dashed
    var(--hyc-border-upload);

  border-radius:
    var(--hyc-radius-field);

  font-size:
    var(--hyc-fs-body-alt);

  font-weight:
    var(--hyc-fw-semibold);

  cursor:
    pointer;
}


.evidence-upload-button:hover {
  background:
    var(--hyc-action-soft);
}


.evidence-upload-button
input {
  display:
    none;
}


.evidence-upload-status {
  min-height:
    0;

  margin:
    0;

  color:
    var(--hyc-text-body);

  font-size:
    var(--hyc-fs-help);

  line-height:
    var(--hyc-lh-ui);
}


.evidence-coming-soon {
  min-height:
    var(--hyc-control-h);

  padding:
    0
    var(--hyc-space-5);

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  color:
    var(--hyc-text-disabled);

  background:
    var(--hyc-bg-muted);

  border-radius:
    var(--hyc-radius-field);

  font-size:
    var(--hyc-fs-body-alt);
}



/* =========================================================
   16. PANTALLAS DE ÉXITO
========================================================= */

.success-container {
  min-height:
    100vh;

  padding:
    var(--hyc-space-10)
    var(--hyc-page-padding-x)
    var(--hyc-space-8);

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    flex-start;

  gap:
    0;

  background:
    var(--hyc-bg-surface);
}


.success-symbol {
  width:
    64px;

  height:
    64px;

  margin-bottom:
    var(--hyc-space-7);

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  color:
    var(--hyc-success-text);

  background:
    var(--hyc-bg-context);

  border-radius:
    var(--hyc-radius-pill);

  font-size:
    28px;

  font-weight:
    var(--hyc-fw-semibold);
}


.success-container h2 {
  margin-top:
    var(--hyc-space-2);

  font-size:
    var(--hyc-fs-success);

  line-height:
    var(--hyc-lh-display);
}


.success-card {
  padding:
    var(--hyc-card-padding);

  margin:
    var(--hyc-space-7)
    0;

  background:
    var(--hyc-bg-context);

  border:
    1px solid
    var(--hyc-success-border);

  border-radius:
    var(--hyc-radius-panel);
}


.success-label {
  color:
    var(--hyc-text-brand);

  font-size:
    var(--hyc-fs-eyebrow);

  font-weight:
    var(--hyc-fw-semibold);

  letter-spacing:
    var(--hyc-ls-meta);

  text-transform:
    uppercase;
}


.success-folio {
  margin-top:
    6px;

  color:
    var(--hyc-mint-900);

  font-size:
    26px;

  font-weight:
    var(--hyc-fw-semibold);

  letter-spacing:
    var(--hyc-ls-title);
}


.success-summary {
  margin-top:
    var(--hyc-space-4);

  color:
    var(--hyc-text-body);

  font-size:
    var(--hyc-fs-label);

  line-height:
    var(--hyc-lh-ui);
}


.success-note {
  margin:
    0
    0
    var(--hyc-space-7);

  color:
    var(--hyc-text-body);

  font-size:
    var(--hyc-fs-label);

  line-height:
    var(--hyc-lh-ui);
}



/* =========================================================
   17. LOADING
========================================================= */

.loading-overlay {
  position:
    fixed;

  inset:
    0;

  z-index:
    999;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  background:
    var(--hyc-bg-app);
}


.loader {
  width:
    30px;

  height:
    30px;

  border:
    2px solid
    var(--hyc-mint-100);

  border-top-color:
    var(--hyc-action);

  border-radius:
    50%;

  animation:
    spin
    0.7s
    linear
    infinite;
}


@keyframes spin {

  to {
    transform:
      rotate(360deg);
  }

}



/* =========================================================
   18. HOME · ESTRUCTURA GENERAL
========================================================= */

#screen-home {
  width:
    100%;

  max-width:
    none;

  min-height:
    100vh;

  background:
    var(--hyc-bg-surface);
}


#screen-home.screen-active {
  display:
    flex;

  flex-direction:
    column;
}


#screen-home
.home-content {
  width:
    100%;

  flex:
    1;

  padding:
    0;

  display:
    flex;

  flex-direction:
    column;
}


#screen-home
.home-hero,
#screen-home
.home-section {
  width:
    100%;
}


#screen-home
.home-main,
#screen-home
.home-section-heading,
#screen-home
.home-courses-heading,
#screen-home
.home-impact-heading,
#screen-home
.home-program-grid,
#screen-home
.home-course-categories,
#screen-home
.home-impact-grid {
  width:
    100%;

  max-width:
    1120px;

  margin-left:
    auto;

  margin-right:
    auto;
}



/* =========================================================
   19. HOME · HEADER
========================================================= */

#screen-home
.home-header {
  width:
    100%;

  min-height:
    72px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    12px
    20px;

  background:
    var(--hyc-bg-surface);

  border-bottom:
    1px solid
    var(--hyc-border-subtle);
}


#screen-home
.brand-logo {
  display:
    block;

  width:
    auto;

  height:
    auto;

  max-width:
    150px;

  max-height:
    60px;

  margin:
    0;

  object-fit:
    contain;
}



/* =========================================================
   20. HOME · HERO
========================================================= */

#screen-home
.home-hero {
  background:
    var(--hyc-bg-surface);
}


#screen-home
.home-main {
  padding:
    40px
    20px
    48px;
}


#screen-home
.home-main
.eyebrow {
  margin:
    0;

  color:
    var(--hyc-text-brand);

  font-size:
    var(--hyc-fs-eyebrow);

  font-weight:
    var(--hyc-fw-semibold);

  line-height:
    1.4;

  letter-spacing:
    0.14em;

  text-transform:
    uppercase;
}


#screen-home
.home-main
h1 {
  margin:
    8px
    0
    0;

  color:
    var(--hyc-text-strong);

  font-size:
    var(--hyc-fs-title);

  font-weight:
    var(--hyc-fw-medium);

  line-height:
    1.2;

  letter-spacing:
    -0.01em;
}


#screen-home
.home-main
.mint-rule {
  width:
    48px;

  height:
    2px;

  margin-top:
    14px;

  background:
    var(--hyc-mint-500);
}


#screen-home
.lead-copy {
  max-width:
    520px;

  margin:
    16px
    0
    0;

  color:
    var(--hyc-text-body);

  font-size:
    var(--hyc-fs-body);

  font-weight:
    var(--hyc-fw-regular);

  line-height:
    var(--hyc-lh-body);
}


#screen-home
.home-primary-action {
  width:
    100%;

  max-width:
    420px;

  margin-top:
    28px;
}


#screen-home
.home-returning-action {
  width:
    100%;

  max-width:
    420px;

  margin-top:
    34px;

  padding-top:
    26px;

  border-top:
    1px solid
    var(--hyc-border-subtle);
}


#screen-home
.home-returning-title {
  margin:
    0;

  color:
    var(--hyc-text-strong);

  font-size:
    var(--hyc-fs-label);

  font-weight:
    var(--hyc-fw-semibold);

  line-height:
    1.4;
}


#screen-home
.home-returning-copy {
  margin:
    4px
    0
    14px;

  color:
    var(--hyc-text-body);

  font-size:
    var(--hyc-fs-help);

  font-weight:
    var(--hyc-fw-regular);

  line-height:
    1.5;
}



/* =========================================================
   21. HOME · ICONOS DE BOTONES
========================================================= */

#screen-home
.home-action-btn {
  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    12px;
}


#screen-home
.home-action-icon {
  width:
    22px;

  height:
    22px;

  flex:
    0 0 22px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;
}


#screen-home
.home-action-icon
svg {
  width:
    22px;

  height:
    22px;

  display:
    block;

  fill:
    none;

  stroke:
    currentColor;

  stroke-width:
    1.9;

  stroke-linecap:
    round;

  stroke-linejoin:
    round;
}


#screen-home
.btn-primary
.home-action-icon {
  color:
    #FFFFFF;
}


#screen-home
.btn-secondary
.home-action-icon {
  color:
    var(--hyc-action);
}



/* =========================================================
   22. HOME · SECCIONES GENERALES
========================================================= */

#screen-home
.home-section {
  padding:
    56px
    20px;
}


#screen-home
.home-section-heading,
#screen-home
.home-courses-heading,
#screen-home
.home-impact-heading {
  margin-bottom:
    28px;
}


#screen-home
.home-section
h2 {
  margin:
    8px
    0
    0;

  color:
    var(--hyc-text-strong);

  font-size:
    28px;

  font-weight:
    var(--hyc-fw-medium);

  line-height:
    1.22;

  letter-spacing:
    -0.01em;
}


#screen-home
.home-section-intro {
  max-width:
    620px;

  margin:
    16px
    0
    0;

  color:
    var(--hyc-text-body);

  font-size:
    var(--hyc-fs-body);

  font-weight:
    var(--hyc-fw-regular);

  line-height:
    var(--hyc-lh-body);
}



/* =========================================================
   23. HOME · PROGRAMAS
========================================================= */

#screen-home
.home-programs {
  background:
    var(--hyc-bg-app);

  border-top:
    1px solid
    rgba(101, 102, 106, 0.08);
}


#screen-home
.home-program-grid {
  display:
    grid;

  grid-template-columns:
    1fr;

  gap:
    18px;
}


#screen-home
.home-program-card {
  position:
    relative;

  overflow:
    hidden;

  min-height:
    0;

  padding:
    28px
    24px
    26px;

  display:
    flex;

  flex-direction:
    column;

  background:
    var(--hyc-bg-surface);

  border:
    1px solid
    rgba(101, 102, 106, 0.14);

  border-radius:
    16px;

  box-shadow:
    0 2px 5px
    rgba(15, 16, 18, 0.05);
}


/* Barra superior */

#screen-home
.home-program-accent {
  position:
    absolute;

  top:
    0;

  left:
    0;

  width:
    100%;

  height:
    6px;

  background:
    var(--hyc-mint-500);
}


#screen-home
.home-program-tv
.home-program-accent {
  background:
    var(--hyc-mint-800);
}


#screen-home
.home-program-js
.home-program-accent {
  background:
    var(--hyc-mint-500);
}


#screen-home
.home-program-sumate
.home-program-accent {
  background:
    var(--hyc-mint-200);
}


/* Cabecera */

#screen-home
.home-program-header {
  display:
    flex;

  align-items:
    center;

  gap:
    16px;
}


#screen-home
.home-program-icon {
  width:
    46px;

  height:
    46px;

  flex:
    0 0 46px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  margin:
    0;

  background:
    var(--hyc-mint-50);

  color:
    #2F7165;

  border-radius:
    13px;
}


#screen-home
.home-program-icon
svg {
  width:
    25px;

  height:
    25px;

  display:
    block;

  fill:
    none;

  stroke:
    currentColor;

  stroke-width:
    1.8;

  stroke-linecap:
    round;

  stroke-linejoin:
    round;
}


#screen-home
.home-program-header
h3 {
  margin:
    0;

  color:
    var(--hyc-text-strong);

  font-size:
    20px;

  font-weight:
    var(--hyc-fw-semibold);

  line-height:
    1.25;
}


/* Descripción */

#screen-home
.home-program-description {
  margin:
    24px
    0
    0;

  color:
    var(--hyc-text-body);

  font-size:
    var(--hyc-fs-body);

  font-weight:
    var(--hyc-fw-regular);

  line-height:
    var(--hyc-lh-body);
}


/* Estado */

#screen-home
.home-program-status {
  margin-top:
    22px;

  font-size:
    15px;

  line-height:
    1.5;
}


#screen-home
.home-program-status-active {
  display:
    flex;

  align-items:
    flex-start;

  gap:
    10px;

  color:
    var(--hyc-action);

  font-weight:
    600;
}


#screen-home
.home-program-check {
  flex:
    0 0 auto;

  font-size:
    16px;

  line-height:
    1.4;
}


#screen-home
.home-program-status-neutral {
  padding-top:
    18px;

  color:
    var(--hyc-text-body);

  border-top:
    1px solid
    var(--hyc-border-subtle);
}


/* CTA curso */

#screen-home
.home-program-cta {
  width:
    100%;

  min-height:
    54px;

  margin-top:
    22px;

  padding:
    0
    22px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    12px;

  color:
    var(--hyc-action);

  background:
    var(--hyc-bg-surface);

  border:
    2px solid
    #B8CBC5;

  border-radius:
    var(--hyc-radius-pill);

  font-size:
    17px;

  font-weight:
    700;

  line-height:
    1.2;

  text-decoration:
    none;

  transition:
    background
      var(--hyc-duration)
      var(--hyc-ease),
    border-color
      var(--hyc-duration)
      var(--hyc-ease);
}


#screen-home
.home-program-cta:hover {
  background:
    var(--hyc-action-soft);

  border-color:
    var(--hyc-action);
}



/* =========================================================
   24. HOME · PLAN CUADRIENAL 2026–2030 · META 5
========================================================= */

#screen-home .home-plan-section {
    background: var(--hyc-navy);
    color: #FFFFFF;
    width: 100%;
}

#screen-home .home-plan-inner {
    max-width: 1120px;
    margin: 0 auto;
    padding: 92px 48px 88px;

    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    column-gap: 78px;
}


/* -----------------------------------------------------
   COLUMNA IZQUIERDA
----------------------------------------------------- */

#screen-home .home-plan-meta {
    padding: 10px 38px 0 0;
    border-right: 1px solid rgba(255,255,255,.14);
}

#screen-home .home-plan-reference {
    margin: 0 0 24px;

    color: rgba(255,255,255,.50);

    font-size: 12px;
    font-weight: 700;
    line-height: 1.55;
    letter-spacing: .17em;
}

#screen-home .home-plan-number {
    display: flex;
    align-items: flex-end;
    gap: 13px;
}

#screen-home .home-plan-five {
    color: var(--hyc-mint-500);

    font-size: 96px;
    font-weight: 400;
    line-height: .9;
}

#screen-home .home-plan-meta-label {
    color: var(--hyc-mint-500);

    font-size: 50px;
    font-weight: 700;
    letter-spacing: .22em;
    padding-bottom: 8px;
}


/* -----------------------------------------------------
   CONTENIDO PRINCIPAL
----------------------------------------------------- */

#screen-home .home-plan-main {
    max-width: 700px;
}

#screen-home .home-plan-title {
    margin: 0;

    color: #FFFFFF;

    font-size: clamp(42px, 4.1vw, 60px);
    font-weight: 400;
    line-height: 1.08;
    letter-spacing: -.035em;

    text-wrap: balance;
}

#screen-home .home-plan-accent {
    width: 55px;
    height: 2px;

    margin: 38px 0 34px;

    background: var(--hyc-mint-500);
}

#screen-home .home-plan-principle {
    margin: 0;

    max-width: 680px;

    color: rgba(255,255,255,.90);

    font-size: 18px;
    font-weight: 400;
    line-height: 1.6;
}


/* -----------------------------------------------------
   ESTA PLATAFORMA
----------------------------------------------------- */

#screen-home .home-plan-platform {
    margin-top: 34px;
    padding-top: 28px;

    border-top: 1px solid rgba(255,255,255,.12);

    display: grid;
    grid-template-columns: 100px 1fr;
    column-gap: 26px;
}

#screen-home .home-plan-platform-label {
    color: var(--hyc-mint-500);

    font-size: 10px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: .18em;
}

#screen-home .home-plan-platform p {
    margin: 0;

    color: rgba(255,255,255,.64);

    font-size: 15px;
    font-weight: 400;
    line-height: 1.65;
}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 900px) {

    #screen-home .home-plan-inner {
        grid-template-columns: 200px minmax(0, 1fr);
        column-gap: 48px;
        padding: 72px 40px;
    }

    #screen-home .home-plan-title {
        font-size: 42px;
    }

}


/* =====================================================
   MÓVIL
===================================================== */

@media (max-width: 600px) {

    #screen-home .home-plan-inner {
        display: block;
        padding: 48px 28px 50px;
    }


    /* Meta */

    #screen-home .home-plan-meta {
        padding: 0;
        border-right: 0;
    }

    #screen-home .home-plan-reference {
        margin-bottom: 20px;

        font-size: 10px;
        line-height: 1.4;
        letter-spacing: .15em;
    }

    #screen-home .desktop-only {
        display: none;
    }

    #screen-home .home-plan-number {
        margin-bottom: 30px;

        align-items: center;
        gap: 10px;
    }

    #screen-home .home-plan-five {
        font-size: 48px;
        line-height: 1;
        order: 2;
    }

    #screen-home .home-plan-meta-label {
        font-size: 11px;
        padding-bottom: 0;
        order: 1;
    }


    /* Título */

    #screen-home .home-plan-title {
        font-size: 32px;
        line-height: 1.18;
        letter-spacing: -.025em;

        text-wrap: pretty;
    }

    #screen-home .home-plan-accent {
        width: 56px;
        margin: 28px 0 26px;
    }


    /* Línea de la meta */

    #screen-home .home-plan-principle {
        font-size: 17px;
        line-height: 1.55;
    }


    /* Plataforma */

    #screen-home .home-plan-platform {
        margin-top: 28px;
        padding-top: 24px;

        display: block;
    }

    #screen-home .home-plan-platform-label {
        display: block;
        margin-bottom: 13px;

        font-size: 10px;
    }

    #screen-home .home-plan-platform p {
        font-size: 15px;
        line-height: 1.6;
    }

}


/* =========================================================
   25. HOME · CATÁLOGO DE CURSOS
========================================================= */

#screen-home .home-courses {
  background: var(--hyc-bg-surface);
}


#screen-home .home-course-categories {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;

  margin-top: 34px;
}


/* Categoría */

#screen-home .home-course-category {
  width: 100%;
  min-height: 0;

  margin: 0;
  padding: 0;

  display: block;

  overflow: hidden;

  background: var(--hyc-bg-surface);

  border: 1px solid #E2E6E5;
  border-radius: var(--hyc-radius-card);

  box-shadow: none;
}


/* Cabecera de categoría */

#screen-home .home-course-category-button {
  width: 100%;
  min-height: 64px;

  padding: 17px 20px;

  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 14px;

  appearance: none;
  -webkit-appearance: none;

  background: var(--hyc-bg-surface);
  color: var(--hyc-text-strong);

  border: 0;
  border-radius: 0;

  font-family: inherit;
  font-size: 15px;
  line-height: 1.35;

  text-align: left;

  cursor: pointer;

  transition:
    background-color var(--hyc-duration) var(--hyc-ease),
    border-color var(--hyc-duration) var(--hyc-ease);
}


#screen-home .home-course-category-button:hover {
  background: #F8FBFA;
}


#screen-home .home-course-category-button:focus-visible {
  outline: 2px solid var(--hyc-mint-500);
  outline-offset: -2px;
}


#screen-home .home-course-category-title {
  min-width: 0;

  color: var(--hyc-text-strong);

  font-weight: var(--hyc-fw-semibold);
}


#screen-home .home-course-category-meta {
  white-space: nowrap;

  color: #777B7A;

  font-size: 12px;
  font-weight: var(--hyc-fw-regular);
}


#screen-home .home-course-category-chevron {
  width: 20px;
  height: 20px;

  display: flex;
  align-items: center;
  justify-content: center;

  color: var(--hyc-action);

  font-size: 18px;
  line-height: 1;

  transition:
    transform var(--hyc-duration) var(--hyc-ease);
}


/* Categoría abierta */

#screen-home .home-course-category.open {
  grid-column: 1 / -1;

  border-color: #B9DAD2;
}


#screen-home .home-course-category.open
.home-course-category-button {
  background: #F5FAF8;

  border-bottom: 1px solid #DDEAE7;
}


#screen-home .home-course-category.open
.home-course-category-chevron {
  transform: rotate(180deg);
}


/* Panel */

#screen-home .home-course-category-panel {
  width: 100%;

  padding: 0 24px;

  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));

  background: var(--hyc-bg-surface);
}


#screen-home .home-course-category-panel[hidden] {
  display: none;
}


/* Curso individual */

#screen-home .home-course-item {
  min-width: 0;

  padding: 24px;

  background: var(--hyc-bg-surface);

  border-bottom: 1px solid #EDF0EF;
}


#screen-home .home-course-item:nth-child(odd) {
  padding-left: 0;

  border-right: 1px solid #EDF0EF;
}


#screen-home .home-course-item:nth-child(even) {
  padding-right: 0;
}


#screen-home .home-course-item:nth-last-child(-n + 2) {
  border-bottom: 0;
}


#screen-home .home-course-item-content h4 {
  margin: 0 0 8px;

  color: var(--hyc-text-strong);

  font-size: 15px;
  font-weight: var(--hyc-fw-semibold);
  line-height: 1.35;
}


#screen-home .home-course-item-content p {
  margin: 0;

  color: var(--hyc-text-body);

  font-size: 13px;
  font-weight: var(--hyc-fw-regular);
  line-height: 1.55;
}


/* Recursos */

#screen-home .home-course-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;

  margin-top: 16px;
}


#screen-home .home-course-resource {
  min-height: 36px;

  padding: 8px 14px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  color: var(--hyc-action);

  background: var(--hyc-bg-surface);

  border: 1px solid #AFCBC4;
  border-radius: var(--hyc-radius-pill);

  font-size: 12px;
  font-weight: var(--hyc-fw-semibold);
  line-height: 1.2;

  text-decoration: none;

  transition:
    background-color var(--hyc-duration) var(--hyc-ease),
    border-color var(--hyc-duration) var(--hyc-ease);
}


#screen-home .home-course-resource:hover {
  background: #F1F8F6;

  border-color: #78AFA3;
}


#screen-home .home-course-resource:focus-visible {
  box-shadow: var(--hyc-focus-ring);
}


/* Estados */

#screen-home .home-courses-loading,
#screen-home .home-courses-empty {
  grid-column: 1 / -1;

  margin: 0;
  padding: 24px;

  color: #717574;

  background: #FAFBFB;

  border: 1px solid #E4E8E7;
  border-radius: var(--hyc-radius-card);

  font-size: 14px;
  line-height: 1.5;
}


/* Móvil */

@media (max-width: 700px) {

  #screen-home .home-course-categories {
    grid-template-columns: 1fr;

    gap: 10px;

    margin-top: 26px;
  }


  #screen-home .home-course-category.open {
    grid-column: auto;
  }


  #screen-home .home-course-category-button {
    min-height: 60px;

    padding: 16px;

    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 9px;
  }


  #screen-home .home-course-category-title {
    font-size: 14px;
  }


  #screen-home .home-course-category-meta {
    font-size: 11px;
  }


  #screen-home .home-course-category-panel {
    padding: 0 16px;

    grid-template-columns: 1fr;
  }


  #screen-home .home-course-item,
  #screen-home .home-course-item:nth-child(odd),
  #screen-home .home-course-item:nth-child(even) {
    padding: 18px 0;

    border-right: 0;
    border-bottom: 1px solid #EDF0EF;
  }


  #screen-home .home-course-item:last-child {
    border-bottom: 0;
  }


  #screen-home .home-course-item-content h4 {
    font-size: 14px;
  }


  #screen-home .home-course-item-content p {
    font-size: 13px;
    line-height: 1.5;
  }


  #screen-home .home-course-actions {
    gap: 7px;

    margin-top: 13px;
  }


  #screen-home .home-course-resource {
    min-height: 34px;

    padding: 7px 11px;

    font-size: 11px;
  }

}


/* =========================================================
   26. HOME · CADA ACTIVIDAD CUENTA
========================================================= */

#screen-home
.home-impact {
  background:
    var(--hyc-mint-50);

  border-top:
    1px solid
    var(--hyc-mint-100);
}


#screen-home
.home-impact
.eyebrow {
  color:
    var(--hyc-text-brand);
}


#screen-home
.home-impact-grid {
  display:
    grid;

  grid-template-columns:
    1fr;

  gap:
    12px;
}


#screen-home
.home-impact-item {
  padding:
    18px;

  display:
    flex;

  align-items:
    flex-start;

  gap:
    14px;

  background:
    rgba(255, 255, 255, 0.72);

  border:
    1px solid
    rgba(90, 179, 154, 0.20);

  border-radius:
    14px;
}


#screen-home
.home-impact-icon {
  width:
    36px;

  height:
    36px;

  flex:
    0
    0
    36px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  color:
    var(--hyc-action);

  background:
    #FFFFFF;

  border:
    1px solid
    rgba(90, 179, 154, 0.22);

  border-radius:
    50%;

  font-size:
    var(--hyc-fs-label);

  font-weight:
    var(--hyc-fw-semibold);
}


#screen-home
.home-impact-item
h3 {
  margin:
    0;

  color:
    var(--hyc-text-strong);

  font-size:
    16px;

  font-weight:
    600;

  line-height:
    1.4;
}


#screen-home
.home-impact-item
p {
  margin:
    4px
    0
    0;

  color:
    var(--hyc-text-body);

  font-size:
    14px;

  line-height:
    1.5;
}



/* =========================================================
   27. HOME · BLOQUE DE AYUDA
========================================================= */

#screen-home
.support-section {
  width:
    100%;

  padding:
    54px
    24px
    46px;

  background:
    var(--hyc-bg-surface);

  border-top:
    1px solid
    rgba(101, 102, 106, 0.10);
}


#screen-home
.support-content {
  width:
    100%;

  max-width:
    620px;

  margin:
    0
    auto;

  text-align:
    center;
}


#screen-home
.support-title {
  margin:
    0
    0
    28px;

  color:
    #2F3033;

  font-size:
    22px;

  font-weight:
    var(--hyc-fw-semibold);

  line-height:
    1.25;
}


#screen-home
.support-whatsapp {
  width:
    100%;

  min-height:
    64px;

  padding:
    14px
    24px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    12px;

  color:
    #2F7165;

  background:
    #FFFFFF;

  border:
    2px solid
    #B8CBC5;

  border-radius:
    var(--hyc-radius-pill);

  font-size:
    17px;

  font-weight:
    var(--hyc-fw-semibold);

  line-height:
    1.25;

  text-decoration:
    none;

  transition:
    background
      var(--hyc-duration)
      var(--hyc-ease),
    border-color
      var(--hyc-duration)
      var(--hyc-ease),
    transform
      150ms
      ease;
}


#screen-home
.support-whatsapp:hover {
  background:
    #F4FAF8;

  border-color:
    #2F7165;
}


#screen-home
.support-whatsapp:active {
  transform:
    scale(0.99);
}


#screen-home
.support-whatsapp-icon {
  width:
    28px;

  height:
    28px;

  flex:
    0
    0
    28px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;
}


#screen-home
.support-whatsapp-icon
svg {
  width:
    100%;

  height:
    100%;
}


#screen-home
.support-brand {
  margin:
    30px
    0
    0;

  color:
    #8B8E92;

  font-size:
    16px;

  line-height:
    1.4;
}



/* =========================================================
   28. RESPONSIVE · MÓVIL
========================================================= */

@media (max-width: 599px) {

  :root {
    --hyc-page-padding-x:
      20px;

    --hyc-page-padding-y:
      24px;

    --hyc-card-padding:
      18px;

    --hyc-card-padding-sm:
      16px;
  }


  html,
  body,
  .app-shell {
    width:
      100%;

    max-width:
      none;
  }


  .app-screen {
    width:
      100%;

    max-width:
      none;
  }


  /* HOME HERO */

  #screen-home
  .home-main {
    padding:
      32px
      20px
      44px;
  }


  #screen-home
  .home-program-grid {
    gap:
      14px;
  }


  #screen-home
  .home-program-card {
    padding:
      28px
      24px
      26px;
  }


  #screen-home
  .home-program-header
  h3 {
    font-size:
      21px;
  }


  #screen-home
  .home-program-description {
    font-size:
      17px;
  }


  #screen-home
  .home-section {
    padding:
      48px
      20px;
  }


  #screen-home
  .home-course-category {
    min-height:
      60px;
  }


  #screen-home
  .home-impact-grid {
    gap:
      10px;
  }


  #screen-home
  .home-impact-item {
    padding:
      16px;
  }



  /* CONTACTO */

  #screen-home
  .support-section {
    padding:
      44px
      28px
      40px;
  }


  #screen-home
  .support-title {
    margin-bottom:
      24px;

    font-size:
      23px;
  }


  #screen-home
  .support-whatsapp {
    min-height:
      60px;

    padding:
      13px
      18px;

    font-size:
      18px;
  }


  #screen-home
  .support-brand {
    margin-top:
      26px;

    font-size:
      15px;
  }

}



/* =========================================================
   29. RESPONSIVE · MÓVIL MUY PEQUEÑO
========================================================= */

@media (max-width: 359px) {

  .field-row,
  .results-age-grid {
    grid-template-columns:
      1fr;
  }

}



/* =========================================================
   30. RESPONSIVE · TABLET
========================================================= */

@media (min-width: 600px) {

  :root {
    --hyc-page-padding-x:
      32px;

    --hyc-page-padding-y:
      32px;

    --hyc-card-padding:
      20px;
  }


  body {
    background:
      var(--hyc-bg-subtle);
  }


  .app-shell {
    padding:
      24px
      0;
  }


  .app-screen {
    min-height:
      calc(100vh - 48px);

    border-radius:
      var(--hyc-radius-screen);

    box-shadow:
      var(--hyc-shadow-elevated);

    overflow:
      hidden;
  }


  .form-container {
    padding-bottom:
      40px;
  }


  h1,
  h2 {
    font-size:
      32px;
  }


  #screen-home
  .home-main {
    padding:
      56px
      32px
      64px;
  }


  #screen-home
  .home-section {
    padding:
      64px
      32px;
  }


  #screen-home
  .home-program-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }


  #screen-home
  .home-course-categories {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }


  #screen-home
  .home-impact-grid {
    grid-template-columns:
      repeat(
        3,
        minmax(0, 1fr)
      );
  }

}



/* =========================================================
   31. RESPONSIVE · DESKTOP
========================================================= */

@media (min-width: 900px) {

  #screen-home
  .home-main {
    padding:
      72px
      40px
      80px;

    display:
      grid;

    grid-template-columns:
      minmax(0, 1fr)
      380px;

    column-gap:
      54px;

    align-items:
      start;
  }


  #screen-home
  .home-main >
  .eyebrow,

  #screen-home
  .home-main >
  h1,

  #screen-home
  .home-main >
  .mint-rule,

  #screen-home
  .home-main >
  .lead-copy {
    grid-column:
      1;
  }


  #screen-home
  .home-primary-action,

  #screen-home
  .home-returning-action {
    grid-column:
      2;
  }


  #screen-home
  .home-primary-action {
    grid-row:
      1 / span 3;

    align-self:
      end;

    margin-top:
      28px;
  }


  #screen-home
  .home-returning-action {
    grid-row:
      4 / span 2;

    margin-top:
      22px;
  }


  #screen-home
  .home-section {
    padding:
      80px
      40px;
  }


  #screen-home
  .home-program-grid {
    grid-template-columns:
      repeat(
        3,
        minmax(0, 1fr)
      );

    gap:
      20px;
  }


  #screen-home
  .home-program-card {
    min-height:
      330px;
  }


  #screen-home
  .home-course-categories {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );

    gap:
      14px;
  }

}



/* =========================================================
   32. RESPONSIVE · DESKTOP GRANDE
========================================================= */

@media (min-width: 1024px) {

  :root {
    --hyc-page-padding-x:
      40px;

    --hyc-page-padding-y:
      40px;
  }

}

/* =========================================================
   33. CHECKLIST DE ACTIVIDAD
========================================================= */

.activity-checklist-root {
  width: 100%;
}


.activity-checklist-loading,
.activity-checklist-error {
  padding: 18px;

  color: var(--hyc-text-body);
  background: var(--hyc-bg-muted);

  border: 1px solid var(--hyc-border-subtle);
  border-radius: var(--hyc-radius-card);

  font-size: var(--hyc-fs-label);
  line-height: var(--hyc-lh-ui);
}


.activity-checklist-error {
  color: var(--hyc-error-text);
  background: var(--hyc-error-bg);
  border-color: var(--hyc-error-border);
}


.activity-checklist-section {
  width: 100%;
}


.activity-checklist-header {
  margin-bottom: 20px;
}


.activity-checklist-eyebrow {
  margin: 0 0 6px;

  color: var(--hyc-text-brand);

  font-size: 12px;
  font-weight: var(--hyc-fw-semibold);
  line-height: 1.4;
  letter-spacing: var(--hyc-ls-eyebrow);

  text-transform: uppercase;
}


.activity-checklist-title {
  margin: 0;

  color: var(--hyc-text-strong);

  font-size: 22px;
  font-weight: var(--hyc-fw-semibold);
  line-height: 1.25;
}


.activity-checklist-intro {
  margin: 8px 0 0;

  color: var(--hyc-text-body);

  font-size: 14px;
  line-height: 1.55;
}


/* Progreso general */

.activity-checklist-progress {
  margin-bottom: 18px;
  padding: 16px;

  background: var(--hyc-bg-context);

  border: 1px solid var(--hyc-success-border);
  border-radius: var(--hyc-radius-panel);
}


.activity-checklist-progress-top {
  margin-bottom: 10px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  color: var(--hyc-text-body);

  font-size: 13px;
}


.activity-checklist-progress-top strong {
  color: var(--hyc-action);

  font-weight: var(--hyc-fw-semibold);
}


.activity-checklist-progress-track {
  width: 100%;
  height: 7px;

  overflow: hidden;

  background: rgba(52, 106, 93, 0.12);

  border-radius: var(--hyc-radius-pill);
}


.activity-checklist-progress-bar {
  height: 100%;

  background: var(--hyc-mint-600);

  border-radius: var(--hyc-radius-pill);

  transition:
    width var(--hyc-duration) var(--hyc-ease);
}


/* Etapas */

.activity-checklist-stage {
  overflow: hidden;

  margin-bottom: 14px;

  background: var(--hyc-bg-surface);

  border: 1px solid var(--hyc-border-subtle);
  border-radius: var(--hyc-radius-card);

  box-shadow: var(--hyc-shadow-card);
}


.activity-checklist-stage-header {
  padding: 15px 16px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;

  background: var(--hyc-bg-subtle);

  border-bottom: 1px solid var(--hyc-border-subtle);
}


.activity-checklist-stage-kicker {
  margin-bottom: 2px;

  color: var(--hyc-text-brand);

  font-size: 10px;
  font-weight: var(--hyc-fw-bold);
  line-height: 1.3;
  letter-spacing: 0.12em;
}


.activity-checklist-stage-title {
  margin: 0;

  color: var(--hyc-text-strong);

  font-size: 16px;
  font-weight: var(--hyc-fw-semibold);
  line-height: 1.35;
}


.activity-checklist-stage-count {
  min-width: 46px;
  min-height: 30px;

  padding: 0 10px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  color: var(--hyc-action);

  background: var(--hyc-bg-surface);

  border: 1px solid var(--hyc-success-border);
  border-radius: var(--hyc-radius-pill);

  font-size: 12px;
  font-weight: var(--hyc-fw-bold);
}


.activity-checklist-items {
  padding: 0 16px;
}


/* Casillas */

.activity-checklist-item {
  width: 100%;
  min-height: 54px;

  margin: 0;
  padding: 13px 0;

  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: flex-start;
  gap: 12px;

  color: var(--hyc-text-strong);

  border-bottom: 1px solid var(--hyc-border-subtle);

  font-size: 14px;
  font-weight: var(--hyc-fw-regular);
  line-height: 1.5;

  cursor: pointer;
}


.activity-checklist-item:last-child {
  border-bottom: 0;
}


.activity-checklist-checkbox {
  position: absolute;

  width: 1px;
  height: 1px;

  opacity: 0;

  pointer-events: none;
}


.activity-checklist-custom-check {
  width: 22px;
  height: 22px;

  margin-top: 1px;

  display: flex;
  align-items: center;
  justify-content: center;

  background: var(--hyc-bg-surface);

  border: 1.5px solid var(--hyc-border-control);
  border-radius: 6px;

  transition:
    background var(--hyc-duration) var(--hyc-ease),
    border-color var(--hyc-duration) var(--hyc-ease);
}


.activity-checklist-checkbox:checked +
.activity-checklist-custom-check {
  background: var(--hyc-action);
  border-color: var(--hyc-action);
}


.activity-checklist-checkbox:checked +
.activity-checklist-custom-check::after {
  content: "✓";

  color: #FFFFFF;

  font-size: 14px;
  font-weight: 700;
  line-height: 1;
}


.activity-checklist-item.is-complete
.activity-checklist-item-text {
  color: var(--hyc-text-body);
}


.activity-checklist-item:has(
  .activity-checklist-checkbox:focus-visible
)
.activity-checklist-custom-check {
  box-shadow: var(--hyc-focus-ring);
}


.activity-checklist-checkbox:disabled +
.activity-checklist-custom-check {
  opacity: 0.55;
}


/* Recomendación */

.activity-checklist-recommendation,
.activity-checklist-alert {
  margin: 12px 16px 16px;
  padding: 14px 15px;

  border-radius: var(--hyc-radius-panel);

  font-size: 13px;
  line-height: 1.55;
}


.activity-checklist-recommendation {
  color: var(--hyc-info-text);

  background: var(--hyc-info-bg);

  border: 1px solid var(--hyc-info-border);
}


.activity-checklist-alert {
  color: var(--hyc-warning-text);

  background: var(--hyc-warning-bg);

  border: 1px solid var(--hyc-warning-border);
}


.activity-checklist-info-label {
  margin-bottom: 5px;

  font-size: 11px;
  font-weight: var(--hyc-fw-bold);
  letter-spacing: 0.08em;

  text-transform: uppercase;
}


.activity-checklist-info-text {
  font-size: 13px;
  line-height: 1.55;
}


/* Desktop / tablet */

@media (min-width: 600px) {

  .activity-checklist-stage-header {
    padding: 17px 18px;
  }


  .activity-checklist-items {
    padding: 0 18px;
  }


  .activity-checklist-item {
    grid-template-columns: 24px minmax(0, 1fr);

    padding: 14px 0;

    font-size: 15px;
  }


  .activity-checklist-recommendation,
  .activity-checklist-alert {
    margin-left: 18px;
    margin-right: 18px;
  }

}


/* =========================================================
   34. DETALLE DE ACTIVIDAD · GUÍA CRONOLÓGICA
   Design System HYC v1.1
========================================================= */

#screen-activity-detail.activity-guide-screen {
  max-width: 1180px;
}

#screen-activity-detail .activity-guide-container {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding-bottom: 48px;
}


/* ---------------------------------------------------------
   FICHA COMPACTA
--------------------------------------------------------- */

.activity-overview-card {
  padding: 24px 28px;
  background: var(--hyc-bg-surface);
  border: 1px solid var(--hyc-border-subtle);
  border-radius: var(--hyc-radius-card);
  box-shadow: var(--hyc-shadow-card);
}

.activity-overview-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 8px;
}

.activity-overview-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 14px;
}

.activity-overview-kicker {
  color: var(--hyc-text-brand);
  font-size: 11px;
  font-weight: var(--hyc-fw-bold);
  letter-spacing: var(--hyc-ls-eyebrow);
  line-height: 1.35;
}

.activity-overview-card .activity-detail-folio {
  margin: 0;
  color: var(--hyc-text-body);
  font-size: 13px;
  font-weight: var(--hyc-fw-medium);
  letter-spacing: 0.03em;
}

.activity-overview-title {
  margin: 0;
  color: var(--hyc-text-strong);
  font-size: 26px;
  font-weight: var(--hyc-fw-semibold);
  line-height: 1.25;
  letter-spacing: var(--hyc-ls-title);
}

.activity-overview-status-slot:empty {
  display: none;
}

.activity-overview-details.activity-detail-content {
  margin-top: 22px;
  padding-top: 18px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px 28px;
  overflow: visible;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--hyc-border-subtle);
  border-radius: 0;
  box-shadow: none;
}

.activity-overview-details .detail-row {
  min-width: 0;
  padding: 0;
  gap: 3px;
  border: 0 !important;
}

.activity-overview-details .detail-label {
  font-size: 10px;
  letter-spacing: 0.14em;
}

.activity-overview-details .detail-value {
  font-size: 14px;
  line-height: 1.45;
}


/* ---------------------------------------------------------
   RECORRIDO DE TRES ETAPAS
--------------------------------------------------------- */

.activity-journey-card {
  margin-top: 20px;
  padding: 20px 28px 22px;
  background: var(--hyc-bg-surface);
  border: 1px solid var(--hyc-border-subtle);
  border-radius: var(--hyc-radius-card);
  box-shadow: var(--hyc-shadow-card);
}

.activity-journey-heading {
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.activity-journey-kicker {
  color: var(--hyc-text-brand);
  font-size: 11px;
  font-weight: var(--hyc-fw-bold);
  letter-spacing: var(--hyc-ls-eyebrow);
}

.activity-journey-total {
  color: var(--hyc-text-body);
  font-size: 13px;
  line-height: 1.4;
}

.activity-journey-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}

.activity-journey-steps::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 16.66%;
  right: 16.66%;
  height: 1px;
  background: var(--hyc-border-neutral);
}

.activity-journey-step {
  position: relative;
  z-index: 1;
  min-width: 0;
  padding: 0 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--hyc-text-body);
  font-family: inherit;
  cursor: pointer;
}

.activity-journey-dot {
  width: 17px;
  height: 17px;
  margin-bottom: 2px;
  display: block;
  background: var(--hyc-bg-surface);
  border: 1px solid var(--hyc-border-control);
  border-radius: 50%;
  box-shadow: 0 0 0 4px var(--hyc-bg-surface);
}

.activity-journey-label {
  font-size: 10px;
  font-weight: var(--hyc-fw-semibold);
  letter-spacing: 0.12em;
}

.activity-journey-count {
  font-size: 11px;
  line-height: 1.3;
}

.activity-journey-step.is-active .activity-journey-dot,
.activity-journey-step.is-complete .activity-journey-dot {
  background: var(--hyc-action);
  border-color: var(--hyc-action);
}

.activity-journey-step.is-active .activity-journey-label,
.activity-journey-step.is-complete .activity-journey-label {
  color: var(--hyc-action);
}

.activity-journey-step.is-complete .activity-journey-dot::after {
  content: "✓";
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  font-size: 10px;
  font-weight: 700;
}

.activity-journey-step:focus-visible {
  border-radius: 8px;
  box-shadow: var(--hyc-focus-ring);
}


/* ---------------------------------------------------------
   CONTENEDOR DE ETAPAS
--------------------------------------------------------- */

.activity-guide-stages {
  margin-top: 20px;
}

.activity-guide-stage,
.activity-checklist-stage.activity-guide-stage {
  margin: 0 0 14px;
  overflow: hidden;
  background: var(--hyc-bg-surface);
  border: 1px solid var(--hyc-border-subtle);
  border-radius: var(--hyc-radius-card);
  box-shadow: var(--hyc-shadow-card);
}

.activity-guide-stage.is-complete {
  border-color: var(--hyc-success-border);
}

.activity-guide-stage-toggle {
  width: 100%;
  min-height: 76px;
  padding: 14px 20px;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto 22px;
  align-items: center;
  gap: 12px;
  appearance: none;
  background: var(--hyc-bg-surface);
  color: var(--hyc-text-strong);
  border: 0;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.activity-guide-stage.is-open .activity-guide-stage-toggle {
  background: #FBFCFC;
  border-bottom: 1px solid var(--hyc-border-subtle);
}

.activity-guide-stage-number {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--hyc-text-body);
  background: var(--hyc-bg-subtle);
  border-radius: 50%;
  font-size: 11px;
  font-weight: var(--hyc-fw-semibold);
}

.activity-guide-stage.is-active .activity-guide-stage-number {
  color: var(--hyc-action);
  background: var(--hyc-action-soft);
}

.activity-guide-stage.is-complete .activity-guide-stage-number {
  color: #FFFFFF;
  background: var(--hyc-action);
}

.activity-guide-stage.is-complete .activity-guide-stage-number span {
  display: none;
}

.activity-guide-stage.is-complete .activity-guide-stage-number::after {
  content: "✓";
  font-weight: 700;
}

.activity-guide-stage-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 4px;
}

.activity-guide-stage-kicker {
  display: block;
  margin: 0;
  color: var(--hyc-text-brand);
  font-size: 10px;
  font-weight: var(--hyc-fw-bold);
  line-height: 1.25;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.activity-guide-stage-title {
  display: block;
  margin: 0;
  color: var(--hyc-text-strong);
  font-size: 15px;
  font-weight: var(--hyc-fw-medium);
  line-height: 1.4;
}

.activity-guide-stage-progress {
  min-width: 100px;
  display: grid;
  grid-template-columns: auto 60px;
  align-items: center;
  gap: 9px;
}

.activity-guide-stage-count {
  color: var(--hyc-text-body);
  font-size: 12px;
  white-space: nowrap;
}

.activity-guide-stage-track {
  width: 60px;
  height: 3px;
  overflow: hidden;
  background: var(--hyc-bg-muted);
  border-radius: var(--hyc-radius-pill);
}

.activity-guide-stage-bar {
  display: block;
  height: 100%;
  background: var(--hyc-mint-600);
  border-radius: inherit;
  transition: width var(--hyc-duration) var(--hyc-ease);
}

.activity-guide-stage-chevron {
  color: var(--hyc-text-body);
  font-size: 16px;
  line-height: 1;
  transition: transform var(--hyc-duration) var(--hyc-ease);
}

.activity-guide-stage.is-open .activity-guide-stage-chevron {
  transform: rotate(180deg);
}

.activity-guide-stage-panel {
  padding: 20px 24px 24px;
}

.activity-guide-stage-panel[hidden] {
  display: none !important;
}


/* ---------------------------------------------------------
   MATERIALES · ANTES
--------------------------------------------------------- */

.activity-guide-materials {
  margin-bottom: 22px;
}

.activity-guide-section-head {
  margin-bottom: 12px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.activity-guide-section-label {
  color: var(--hyc-text-body);
  font-size: 10px;
  font-weight: var(--hyc-fw-semibold);
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.activity-guide-section-meta {
  color: var(--hyc-text-body);
  font-size: 12px;
}

.activity-guide-material-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.activity-guide-material-link {
  min-height: 66px;
  padding: 12px 14px;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 10px;
  appearance: none;
  color: var(--hyc-text-strong);
  background: var(--hyc-bg-surface);
  border: 1px solid var(--hyc-border-subtle);
  border-radius: var(--hyc-radius-field);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition:
    border-color var(--hyc-duration) var(--hyc-ease),
    background var(--hyc-duration) var(--hyc-ease);
}

.activity-guide-material-link:hover {
  background: #F8FBFA;
  border-color: var(--hyc-success-border);
}

.activity-guide-material-icon {
  color: var(--hyc-action);
  font-size: 17px;
  line-height: 1;
}

.activity-guide-material-copy strong {
  display: block;
  color: var(--hyc-text-strong);
  font-size: 13px;
  font-weight: var(--hyc-fw-medium);
  line-height: 1.35;
}

.activity-guide-material-copy small {
  display: block;
  margin-top: 2px;
  color: var(--hyc-text-body);
  font-size: 11px;
  line-height: 1.35;
}

.activity-guide-material-arrow {
  color: var(--hyc-text-disabled);
  font-size: 15px;
}


/* ---------------------------------------------------------
   CHECKLIST DENTRO DE CADA ETAPA
--------------------------------------------------------- */

.activity-guide-stage .activity-checklist-items {
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 28px;
}

.activity-guide-stage .activity-checklist-item {
  min-height: 50px;
  padding: 12px 0;
  font-size: 15px;
  line-height: 1.5;
}

.activity-guide-stage .activity-checklist-custom-check {
  width: 18px;
  height: 18px;
  border-radius: 5px;
}

.activity-guide-stage .activity-checklist-checkbox:checked +
.activity-checklist-custom-check::after {
  font-size: 12px;
}

.activity-guide-stage .activity-checklist-recommendation,
.activity-guide-stage .activity-checklist-alert {
  margin: 14px 0 0;
  padding: 13px 14px;
  font-size: 13px;
  line-height: 1.5;
}

.activity-guide-stage .activity-checklist-info-label {
  font-size: 10px;
}

.activity-guide-stage .activity-checklist-info-text {
  font-size: 14px;
  line-height: 1.55;
}


/* ---------------------------------------------------------
   DESPUÉS · CTA
--------------------------------------------------------- */

.activity-guide-after-action {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--hyc-border-subtle);
}

.activity-guide-after-action .btn-primary {
  width: auto;
  min-width: 290px;
  min-height: 50px;
  padding: 0 24px;
  font-size: 15px;
  font-weight: var(--hyc-fw-semibold);
}

.activity-guide-after-note {
  margin: 0 0 12px;
  color: var(--hyc-text-body);
  font-size: 13px;
  line-height: 1.5;
}

/* =========================================================
   RECURSOS DE LA ACTIVIDAD
   Manual · Presentación · Póster y formatos
========================================================= */

.activity-resource-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}


/* Tarjeta completa clickeable */
.activity-resource-card {
  min-width: 0;

  display: flex;
  align-items: flex-start;
  gap: 14px;

  padding: 18px 20px;

  color: var(--hyc-text-primary);
  text-decoration: none;

  background: var(--hyc-surface, #ffffff);

  border: 1px solid var(--hyc-border, #dfe3e1);
  border-radius: 12px;

  cursor: pointer;

  transition:
    background-color 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}


/* Hover desktop */
.activity-resource-card:hover {
  background: #f5f8ff;
  border-color: #afc5ea;
  box-shadow: 0 4px 12px rgba(36, 87, 166, 0.08);

  transform: translateY(-1px);
}


/* Focus accesible */
.activity-resource-card:focus-visible {
  outline: 3px solid rgba(36, 87, 166, 0.22);
  outline-offset: 2px;

  border-color: #7ea6e0;
}


/* Icono */
.activity-resource-icon {
  width: 34px;
  height: 34px;

  flex: 0 0 34px;

  display: flex;
  align-items: center;
  justify-content: center;

  margin-top: 1px;

  color: #2457a6;

  font-size: 20px;
  font-weight: 700;
  line-height: 1;

  background: #eaf1ff;

  border: 1px solid #c4d5f1;
  border-radius: 9px;
}


/* Para "Ver materiales" */
.activity-resource-icon--view {
  font-size: 18px;
}


/* Contenido */
.activity-resource-content {
  min-width: 0;

  display: flex;
  flex-direction: column;
  align-items: flex-start;

  gap: 3px;
}


/* Título */
.activity-resource-title {
  color: var(--hyc-text-primary);

  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
}


/* Descripción */
.activity-resource-description {
  color: var(--hyc-text-secondary);

  font-size: 13px;
  font-weight: 400;
  line-height: 1.45;
}


/* Acción explícita */
.activity-resource-action {
  display: inline-flex;
  align-items: center;

  margin-top: 8px;

  color: #2457a6;

  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
}


/* Flecha visual */
.activity-resource-action::after {
  content: " →";

  margin-left: 5px;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 900px) {

  .activity-resource-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

}


/* =========================================================
   MÓVIL
========================================================= */

@media (max-width: 767px) {

  .activity-resource-card {
    min-height: 74px;

    padding: 15px 16px;

    gap: 12px;
  }


  .activity-resource-icon {
    width: 32px;
    height: 32px;

    flex-basis: 32px;

    font-size: 18px;
  }


  .activity-resource-title {
    font-size: 16px;
  }


  .activity-resource-description {
    font-size: 12px;
  }


  .activity-resource-action {
    margin-top: 6px;

    font-size: 13px;
  }

}


/* ---------------------------------------------------------
   FUENTES DE CONTENIDO DINÁMICO
--------------------------------------------------------- */

.activity-guide-source {
  display: none !important;
}


/* ---------------------------------------------------------
   TABLET / MÓVIL
--------------------------------------------------------- */

@media (max-width: 700px) {

  #screen-activity-detail.activity-guide-screen {
    max-width: var(--hyc-container);
  }

  #screen-activity-detail .activity-guide-container {
    padding-top: 20px;
    padding-bottom: 32px;
  }

  .activity-overview-card {
    padding: 16px;
  }

  .activity-overview-topline {
    align-items: flex-start;
    margin-bottom: 6px;
  }

  .activity-overview-kicker {
    display: none;
  }

  .activity-overview-title {
    font-size: 23px;
    line-height: 1.2;
  }

  .activity-overview-details.activity-detail-content {
    margin-top: 16px;
    padding-top: 14px;
    grid-template-columns: 1fr;
    gap: 9px;
  }

  .activity-overview-details .detail-row {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    align-items: baseline;
    gap: 10px;
  }

  .activity-overview-details .detail-label {
    font-size: 10px;
  }

  .activity-overview-details .detail-value {
    font-size: 14px;
  }

  .activity-journey-card {
    margin-top: 14px;
    padding: 15px 14px 17px;
  }

  .activity-journey-heading {
    margin-bottom: 14px;
  }

  .activity-journey-total {
    font-size: 11px;
  }

  .activity-journey-label {
    font-size: 10px;
  }

  .activity-journey-count {
    font-size: 11px;
  }

  .activity-guide-stages {
    margin-top: 14px;
  }

  .activity-guide-stage {
    margin-bottom: 10px;
  }

  .activity-guide-stage-toggle {
    min-height: 68px;
    padding: 12px 13px;
    grid-template-columns: 28px minmax(0, 1fr) auto 18px;
    gap: 9px;
  }

  .activity-guide-stage-number {
    width: 27px;
    height: 27px;
    font-size: 10px;
  }

  .activity-guide-stage-kicker {
    font-size: 10px;
  }

  .activity-guide-stage-title {
    font-size: 14px;
  }

  .activity-guide-stage-progress {
    min-width: 40px;
    display: block;
    text-align: right;
  }

  .activity-guide-stage-track {
    display: none;
  }

  .activity-guide-stage-count {
    font-size: 11px;
  }

  .activity-guide-stage-panel {
    padding: 15px 14px 18px;
  }

  .activity-guide-section-label {
    font-size: 10px;
  }

  .activity-guide-section-meta {
    font-size: 11px;
  }

  .activity-guide-material-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .activity-guide-material-link {
    min-height: 52px;
    padding: 10px 12px;
  }

  .activity-guide-material-copy strong {
    font-size: 12px;
  }

  .activity-guide-material-copy small {
    font-size: 11px;
  }

  .activity-guide-stage .activity-checklist-items {
    grid-template-columns: 1fr;
    column-gap: 0;
  }

  .activity-guide-stage .activity-checklist-item {
    min-height: 52px;
    padding: 12px 0;
    font-size: 14px;
    line-height: 1.5;
  }

  .activity-guide-stage .activity-checklist-recommendation,
  .activity-guide-stage .activity-checklist-alert {
    margin-top: 12px;
    padding: 13px;
    font-size: 13px;
  }

  .activity-guide-after-action .btn-primary {
    width: 100%;
    min-width: 0;
    min-height: 50px;
    font-size: 15px;
  }

}


/* ---------------------------------------------------------
   DESKTOP
--------------------------------------------------------- */

@media (min-width: 701px) {

  #screen-activity-detail .screen-header {
    max-width: 1180px;
    margin: 0 auto;
  }

  #screen-activity-detail .activity-guide-container {
    padding-left: 36px;
    padding-right: 36px;
  }

}


/* =========================================================
   35. DESIGN SYSTEM HYC v1.1 · REGLAS DE CONSISTENCIA
   Capa canónica para tipografía, superficies y densidad.
========================================================= */

/* Tipografía editorial de la home, usando la misma familia UI */
#screen-home .home-main h1 {
  font-size: clamp(34px, 3.2vw, 44px);
  font-weight: var(--hyc-fw-medium);
  line-height: 1.12;
}

#screen-home .home-section h2 {
  font-size: clamp(28px, 2.4vw, 34px);
  font-weight: var(--hyc-fw-medium);
  line-height: 1.18;
}

#screen-home .home-program-header h3,
#screen-home .support-title {
  font-weight: var(--hyc-fw-semibold);
}

#screen-home .home-program-description,
#screen-home .home-section-intro,
#screen-home .lead-copy {
  font-size: var(--hyc-fs-body);
}

#screen-home .home-program-cta,
#screen-home .support-whatsapp {
  font-size: var(--hyc-fs-action);
  font-weight: var(--hyc-fw-semibold);
}

/* Cards: una misma lógica de borde, radio y elevación */
.home-program-card,
.home-impact-item,
.activity-card,
.review-card,
.result-support-card,
.evidence-requirement-card,
.activity-overview-card,
.activity-journey-card,
.activity-guide-stage {
  border-color: var(--hyc-border-subtle);
  border-radius: var(--hyc-radius-card);
  box-shadow: var(--hyc-shadow-card);
}

/* Labels auxiliares: una sola escala */
.detail-label,
.review-label,
.success-label,
.activity-program,
.activity-guide-section-label,
.activity-overview-kicker,
.activity-journey-kicker,
.activity-guide-stage-kicker {
  text-transform: uppercase;
}

/* Inputs y botones mantienen alturas consistentes */
input,
select {
  min-height: var(--hyc-control-h);
}

.btn,
.activity-materials-button,
.home-program-cta,
.support-whatsapp {
  min-height: var(--hyc-btn-h);
}

/* Evitar texto excesivamente pequeño en la UI operativa */
.activity-guide-material-copy small,
.activity-journey-count,
.activity-guide-stage-count,
.activity-guide-section-meta {
  color: var(--hyc-text-body);
}

@media (max-width: 599px) {
  :root {
    --hyc-fs-title: 28px;
    --hyc-fs-section: 19px;
    --hyc-fs-body: 16px;
    --hyc-fs-label: 14px;
    --hyc-fs-help: 13px;
  }

  #screen-home .home-main h1 {
    font-size: 34px;
  }

  #screen-home .home-section h2 {
    font-size: 28px;
  }

  .btn {
    min-height: 52px;
  }
}

/* =========================================================
   36. ACCESIBILIDAD Y LEGIBILIDAD
   Público prioritario 50+
   HYC Design System · Reading Comfort Layer
========================================================= */

/*
   PRINCIPIOS

   Texto operativo principal:       18px
   Texto secundario:                16px
   Ayudas / metadatos:              15px mínimo
   Labels de formulario:            16px
   Botones:                         17–18px
   Áreas táctiles:                  48–60px mínimo

   Ninguna información necesaria para operar
   la plataforma debe depender de texto de 10–13px.
*/


/* =========================================================
   TOKENS GLOBALES DE LEGIBILIDAD
========================================================= */

:root {

  /* Tipografía accesible */
  --hyc-fs-display: 46px;
  --hyc-fs-success: 34px;
  --hyc-fs-title: 34px;
  --hyc-fs-section: 24px;

  --hyc-fs-action: 18px;
  --hyc-fs-body: 18px;
  --hyc-fs-body-alt: 17px;

  --hyc-fs-label: 16px;
  --hyc-fs-help: 15px;

  --hyc-fs-eyebrow: 13px;
  --hyc-fs-badge: 13px;


  /* Controles más cómodos */
  --hyc-control-h: 58px;
  --hyc-btn-h: 58px;
  --hyc-btn-h-secondary: 56px;
  --hyc-btn-h-inline: 52px;
  --hyc-row-h: 62px;
  --hyc-tap-min: 48px;


  /* Más aire */
  --hyc-gap-field: 14px;
  --hyc-gap-inner: 18px;
}


/* =========================================================
   BASE
========================================================= */

body {
  font-size: 18px;
  line-height: 1.65;

  /*
    Evita que iOS reduzca o altere
    textos de manera inesperada.
  */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}


/* Texto general */

p,
li {
  line-height: 1.65;
}


/* =========================================================
   HEADER / NAVEGACIÓN
========================================================= */

.screen-header {
  min-height: 80px;
  padding: 16px 20px;
}


.back-button {
  width: 50px;
  height: 50px;

  font-size: 29px;
}


.step-label {
  font-size: 16px;
}


/* =========================================================
   TÍTULOS
========================================================= */

.eyebrow {
  font-size: 13px;
  line-height: 1.5;
}


h1,
h2 {
  font-size: 34px;
  line-height: 1.22;
}


.subheading {
  font-size: 24px;
  line-height: 1.3;
}


.lead-copy,
.form-intro {
  font-size: 18px;
  line-height: 1.65;
}


/* =========================================================
   BOTONES
========================================================= */

.btn {
  min-height: 58px;

  padding-left: 24px;
  padding-right: 24px;

  font-size: 18px;
  line-height: 1.25;
}


.btn-secondary {
  min-height: 56px;
  font-size: 18px;
}


.text-button {
  min-height: 48px;

  font-size: 17px;
}


.text-button-small {
  font-size: 16px;
}


/* =========================================================
   FORMULARIOS
========================================================= */

label {
  margin-bottom: 8px;

  font-size: 16px;
  line-height: 1.5;
}


.optional-label {
  font-size: 15px;
}


input,
select,
textarea {
  min-height: 58px;

  padding-left: 16px;
  padding-right: 16px;

  font-size: 18px;
  line-height: 1.5;
}


textarea {
  min-height: 118px;

  padding-top: 14px;
  padding-bottom: 14px;
}


.field-helper,
.field-error {
  font-size: 15px;
  line-height: 1.55;
}


.general-error {
  font-size: 16px;
  line-height: 1.55;
}


/* =========================================================
   TARJETAS / CONTEXTO
========================================================= */

.returning-card,
.summary-card {
  font-size: 16px;
  line-height: 1.6;
}


.returning-title {
  font-size: 17px;
}


.material-card strong {
  font-size: 18px;
}


.material-card .form-intro {
  font-size: 16px;
}


/* =========================================================
   SELECCIÓN DE PROGRAMAS
========================================================= */

.program-card {
  min-height: 104px;

  padding-top: 20px;
  padding-bottom: 20px;
}


.program-card-title {
  font-size: 19px;
  line-height: 1.35;
}


.program-card-description {
  font-size: 16px;
  line-height: 1.55;
}


.program-card-arrow {
  font-size: 24px;
}


/* =========================================================
   CURSOS
========================================================= */

.course-category-button {
  min-height: 64px;

  font-size: 18px;
  line-height: 1.45;
}


.course-option {
  min-height: 64px;

  font-size: 18px;
  line-height: 1.5;
}


.course-option input {
  width: 28px;
  height: 28px;
}


/* =========================================================
   CHECKBOXES GENERALES
========================================================= */

.check-option {
  min-height: 64px;

  font-size: 18px;
  line-height: 1.5;
}


.check-option input {
  width: 28px;
  height: 28px;
}


/* =========================================================
   REVISIÓN
========================================================= */

.review-label {
  font-size: 13px;
}


.review-value {
  font-size: 18px;
  line-height: 1.55;
}


/* =========================================================
   MIS ACTIVIDADES
========================================================= */

.activity-folio {
  font-size: 15px;
}


.activity-status {
  min-height: 30px;

  padding-left: 12px;
  padding-right: 12px;

  font-size: 13px;
}


.activity-program {
  font-size: 13px;
}


.activity-name {
  font-size: 20px;
  line-height: 1.4;
}


.activity-meta {
  font-size: 17px;
  line-height: 1.6;
}


.activity-materials-button {
  min-height: 54px;

  font-size: 17px;
}


.activity-processing {
  font-size: 15px;
}


/* =========================================================
   DETALLE DE ACTIVIDAD
========================================================= */

.activity-detail-folio {
  font-size: 15px;
}


.detail-label {
  font-size: 13px;
}


.detail-value {
  font-size: 18px;
  line-height: 1.55;
}


/* =========================================================
   RESULTADOS
========================================================= */

.result-support-title {
  font-size: 18px;
}


/* =========================================================
   EVIDENCIAS
========================================================= */

.evidence-progress-card {
  font-size: 16px;
}


.evidence-card-title {
  font-size: 18px;
  line-height: 1.45;
}


.evidence-card-status {
  font-size: 16px;
}


.evidence-required-badge,
.evidence-optional-badge {
  min-height: 30px;

  font-size: 13px;
}


.evidence-upload-button {
  min-height: 58px;

  font-size: 17px;
}


.evidence-upload-status {
  font-size: 15px;
}


.evidence-coming-soon {
  min-height: 58px;

  font-size: 17px;
}


/* =========================================================
   HOME
========================================================= */

#screen-home .home-main h1 {
  font-size: clamp(38px, 3.2vw, 48px);
}


#screen-home .lead-copy,
#screen-home .home-section-intro {
  font-size: 18px;
  line-height: 1.65;
}


#screen-home .home-returning-title {
  font-size: 17px;
}


#screen-home .home-returning-copy {
  font-size: 16px;
  line-height: 1.6;
}


#screen-home .home-section h2 {
  font-size: clamp(30px, 2.4vw, 36px);
}


#screen-home .home-program-header h3 {
  font-size: 22px;
}


#screen-home .home-program-description {
  font-size: 18px;
  line-height: 1.65;
}


#screen-home .home-program-status {
  font-size: 16px;
}


#screen-home .home-program-cta {
  min-height: 58px;

  font-size: 18px;
}


/* =========================================================
   HOME · PLAN CUADRIENAL
========================================================= */

#screen-home .home-plan-reference {
  font-size: 13px;
}


#screen-home .home-plan-meta-label {
  font-size: 25px;
}


#screen-home .home-plan-principle {
  font-size: 19px;
}


#screen-home .home-plan-platform-label {
  font-size: 12px;
}


#screen-home .home-plan-platform p {
  font-size: 17px;
  line-height: 1.7;
}


/* =========================================================
   CATÁLOGO DE CURSOS
========================================================= */

#screen-home .home-course-category-button {
  min-height: 72px;

  font-size: 17px;
}


#screen-home .home-course-category-title {
  font-size: 17px;
}


#screen-home .home-course-category-meta {
  font-size: 15px;
}


#screen-home .home-course-item-content h4 {
  font-size: 18px;
  line-height: 1.4;
}


#screen-home .home-course-item-content p {
  font-size: 16px;
  line-height: 1.65;
}


#screen-home .home-course-resource {
  min-height: 44px;

  padding: 10px 16px;

  font-size: 15px;
}


#screen-home .home-courses-loading,
#screen-home .home-courses-empty {
  font-size: 16px;
}


/* =========================================================
   CADA ACTIVIDAD CUENTA
========================================================= */

#screen-home .home-impact-item h3 {
  font-size: 18px;
}


#screen-home .home-impact-item p {
  font-size: 16px;
  line-height: 1.6;
}


/* =========================================================
   SOPORTE
========================================================= */

#screen-home .support-title {
  font-size: 24px;
}


#screen-home .support-whatsapp {
  min-height: 64px;

  font-size: 18px;
}


#screen-home .support-brand {
  font-size: 16px;
}


/* =========================================================
   CHECKLIST GENERAL
========================================================= */

.activity-checklist-loading,
.activity-checklist-error {
  font-size: 16px;
}


.activity-checklist-eyebrow {
  font-size: 13px;
}


.activity-checklist-title {
  font-size: 26px;
}


.activity-checklist-intro {
  font-size: 17px;
  line-height: 1.6;
}


.activity-checklist-progress-top {
  font-size: 16px;
}


.activity-checklist-stage-kicker {
  font-size: 13px;
}


.activity-checklist-stage-title {
  font-size: 19px;
}


.activity-checklist-stage-count {
  min-width: 54px;
  min-height: 34px;

  font-size: 14px;
}


.activity-checklist-item {
  min-height: 62px;

  grid-template-columns: 28px minmax(0, 1fr);

  gap: 14px;

  padding: 15px 0;

  font-size: 17px;
  line-height: 1.6;
}


.activity-checklist-custom-check {
  width: 26px;
  height: 26px;

  border-width: 2px;
}


.activity-checklist-checkbox:checked +
.activity-checklist-custom-check::after {
  font-size: 16px;
}


.activity-checklist-recommendation,
.activity-checklist-alert {
  font-size: 16px;
  line-height: 1.6;
}


.activity-checklist-info-label {
  font-size: 13px;
}


.activity-checklist-info-text {
  font-size: 16px;
  line-height: 1.6;
}


/* =========================================================
   DETALLE DE ACTIVIDAD · FICHA
========================================================= */

.activity-overview-kicker {
  font-size: 13px;
}


.activity-overview-card .activity-detail-folio {
  font-size: 15px;
}


.activity-overview-title {
  font-size: 30px;
}


.activity-overview-details .detail-label {
  font-size: 13px;
}


.activity-overview-details .detail-value {
  font-size: 17px;
  line-height: 1.55;
}


/* =========================================================
   RECORRIDO ANTES / DURANTE / DESPUÉS
========================================================= */

.activity-journey-kicker {
  font-size: 13px;
}


.activity-journey-total {
  font-size: 15px;
}


.activity-journey-label {
  font-size: 13px;
}


.activity-journey-count {
  font-size: 14px;
}


.activity-journey-dot {
  width: 20px;
  height: 20px;
}


/* =========================================================
   ETAPAS
========================================================= */

.activity-guide-stage-toggle {
  min-height: 86px;

  grid-template-columns:
    38px
    minmax(0, 1fr)
    auto
    24px;
}


.activity-guide-stage-number {
  width: 36px;
  height: 36px;

  font-size: 14px;
}


.activity-guide-stage-kicker {
  font-size: 13px;
}


.activity-guide-stage-title {
  font-size: 18px;
  line-height: 1.45;
}


.activity-guide-stage-count {
  font-size: 15px;
}


.activity-guide-stage-chevron {
  font-size: 20px;
}


/* =========================================================
   MATERIALES DE LA ACTIVIDAD
========================================================= */

.activity-guide-section-label {
  font-size: 13px;
}


.activity-guide-section-meta {
  font-size: 15px;
}


.activity-resource-card {
  min-height: 92px;

  padding: 18px 20px;
}


.activity-resource-icon {
  width: 40px;
  height: 40px;

  flex-basis: 40px;

  font-size: 22px;
}


.activity-resource-title {
  font-size: 18px;
}


.activity-resource-description {
  font-size: 15px;
  line-height: 1.5;
}


.activity-resource-action {
  font-size: 16px;
}


/* Compatibilidad con tarjeta anterior */

.activity-guide-material-copy strong {
  font-size: 17px;
}


.activity-guide-material-copy small {
  font-size: 15px;
}


/* =========================================================
   CHECKLIST DENTRO DE ETAPAS
========================================================= */

.activity-guide-stage .activity-checklist-item {
  min-height: 62px;

  font-size: 17px;
  line-height: 1.6;
}


.activity-guide-stage .activity-checklist-custom-check {
  width: 26px;
  height: 26px;
}


.activity-guide-stage .activity-checklist-recommendation,
.activity-guide-stage .activity-checklist-alert {
  font-size: 16px;
  line-height: 1.6;
}


.activity-guide-stage .activity-checklist-info-label {
  font-size: 13px;
}


.activity-guide-stage .activity-checklist-info-text {
  font-size: 16px;
}


/* =========================================================
   CTA DESPUÉS
========================================================= */

.activity-guide-after-action .btn-primary {
  min-height: 58px;

  font-size: 18px;
}


.activity-guide-after-note {
  font-size: 16px;
  line-height: 1.6;
}


/* =========================================================
   MÓVIL · PRIORIDAD MÁXIMA DE LEGIBILIDAD
========================================================= */

@media (max-width: 700px) {

  :root {

    /*
       En móvil NO reducimos el cuerpo.
       18px es intencional.
    */

    --hyc-fs-title: 30px;
    --hyc-fs-section: 23px;

    --hyc-fs-action: 18px;
    --hyc-fs-body: 18px;
    --hyc-fs-body-alt: 17px;

    --hyc-fs-label: 16px;
    --hyc-fs-help: 15px;

    --hyc-fs-eyebrow: 13px;
    --hyc-fs-badge: 13px;

    --hyc-control-h: 58px;
    --hyc-btn-h: 58px;
    --hyc-tap-min: 48px;
  }


  /* -----------------------------------------
     Página
  ----------------------------------------- */

  .form-container {
    padding-left: 22px;
    padding-right: 22px;
  }


  /* -----------------------------------------
     Títulos
  ----------------------------------------- */

  h1,
  h2 {
    font-size: 30px;
  }


  .lead-copy,
  .form-intro {
    font-size: 18px;
  }


  /* -----------------------------------------
     Formulario
  ----------------------------------------- */

  label {
    font-size: 16px;
  }


  input,
  select,
  textarea {
    font-size: 18px;
  }


  .field-helper,
  .field-error {
    font-size: 15px;
  }


  /* -----------------------------------------
     Header
  ----------------------------------------- */

  .screen-header {
    min-height: 78px;
  }


  .step-label {
    font-size: 16px;
  }


  /* -----------------------------------------
     Home
  ----------------------------------------- */

  #screen-home .home-main h1 {
    font-size: 36px;
    line-height: 1.18;
  }


  #screen-home .home-section h2 {
    font-size: 30px;
  }


  #screen-home .home-program-header h3 {
    font-size: 22px;
  }


  #screen-home .home-program-description {
    font-size: 18px;
  }


  #screen-home .home-program-status {
    font-size: 16px;
  }


  /* -----------------------------------------
     Cursos
  ----------------------------------------- */

  #screen-home .home-course-category-button {
    min-height: 68px;

    padding: 17px;
  }


  #screen-home .home-course-category-title {
    font-size: 17px;
  }


  #screen-home .home-course-category-meta {
    font-size: 15px;
  }


  #screen-home .home-course-item-content h4 {
    font-size: 18px;
  }


  #screen-home .home-course-item-content p {
    font-size: 16px;
  }


  #screen-home .home-course-resource {
    min-height: 46px;

    padding: 10px 14px;

    font-size: 16px;
  }


  /* -----------------------------------------
     Detalle actividad
  ----------------------------------------- */

  .activity-overview-card {
    padding: 20px;
  }


  .activity-overview-title {
    font-size: 28px;
    line-height: 1.28;
  }


  .activity-overview-card .activity-detail-folio {
    font-size: 16px;
  }


  .activity-overview-details .detail-row {
    grid-template-columns:
      106px
      minmax(0, 1fr);

    gap: 12px;
  }


  .activity-overview-details .detail-label {
    font-size: 13px;
  }


  .activity-overview-details .detail-value {
    font-size: 17px;
  }


  /* -----------------------------------------
     Journey
  ----------------------------------------- */

  .activity-journey-card {
    padding: 18px 16px 20px;
  }


  .activity-journey-heading {
    align-items: flex-start;
  }


  .activity-journey-kicker {
    font-size: 13px;
  }


  .activity-journey-total {
    font-size: 14px;
  }


  .activity-journey-label {
    font-size: 13px;
  }


  .activity-journey-count {
    font-size: 14px;
  }


  /* -----------------------------------------
     Etapas
  ----------------------------------------- */

  .activity-guide-stage-toggle {
    min-height: 82px;

    padding: 14px 16px;

    grid-template-columns:
      34px
      minmax(0, 1fr)
      auto
      20px;

    gap: 11px;
  }


  .activity-guide-stage-number {
    width: 32px;
    height: 32px;

    font-size: 13px;
  }


  .activity-guide-stage-kicker {
    font-size: 12px;
  }


  .activity-guide-stage-title {
    font-size: 17px;
  }


  .activity-guide-stage-count {
    font-size: 14px;
  }


  .activity-guide-stage-panel {
    padding: 18px 16px 22px;
  }


  /* -----------------------------------------
     Recursos
  ----------------------------------------- */

  .activity-resource-card {
    min-height: 94px;

    padding: 17px;

    gap: 14px;
  }


  .activity-resource-icon {
    width: 42px;
    height: 42px;

    flex-basis: 42px;

    font-size: 22px;
  }


  .activity-resource-title {
    font-size: 18px;
  }


  .activity-resource-description {
    font-size: 15px;
  }


  .activity-resource-action {
    margin-top: 7px;

    font-size: 16px;
  }


  /* -----------------------------------------
     Checklist
  ----------------------------------------- */

  .activity-guide-stage .activity-checklist-item,
  .activity-checklist-item {
    min-height: 66px;

    grid-template-columns:
      28px
      minmax(0, 1fr);

    gap: 14px;

    padding: 16px 0;

    font-size: 17px;
    line-height: 1.6;
  }


  .activity-checklist-custom-check,
  .activity-guide-stage
  .activity-checklist-custom-check {
    width: 26px;
    height: 26px;
  }


  /* -----------------------------------------
     Avisos
  ----------------------------------------- */

  .activity-checklist-recommendation,
  .activity-checklist-alert,
  .activity-guide-stage
  .activity-checklist-recommendation,
  .activity-guide-stage
  .activity-checklist-alert {
    padding: 16px;

    font-size: 16px;
    line-height: 1.65;
  }


  .activity-checklist-info-label,
  .activity-guide-stage
  .activity-checklist-info-label {
    font-size: 13px;
  }


  .activity-checklist-info-text,
  .activity-guide-stage
  .activity-checklist-info-text {
    font-size: 16px;
  }


  /* -----------------------------------------
     Evidencias
  ----------------------------------------- */

  .evidence-requirement-card {
    padding: 18px;

    gap: 16px;
  }


  .evidence-card-title {
    font-size: 18px;
  }


  .evidence-card-status {
    font-size: 16px;
  }


  .evidence-upload-button {
    min-height: 60px;

    font-size: 17px;
  }


  /* -----------------------------------------
     Botones finales
  ----------------------------------------- */

  .activity-guide-after-action .btn-primary,
  .btn {
    min-height: 58px;

    font-size: 18px;
  }

}


/* =========================================================
   PANTALLAS GRANDES · EVITAR TEXTO DEMASIADO PEQUEÑO
========================================================= */

@media (min-width: 900px) {

  /*
     El layout gana ancho en desktop,
     pero el texto no se reduce.
  */

  .activity-guide-stage-kicker,
  .activity-guide-section-label,
  .activity-overview-kicker,
  .activity-journey-kicker {
    font-size: 13px;
  }


  .activity-guide-stage-title {
    font-size: 18px;
  }


  .activity-overview-details .detail-value {
    font-size: 17px;
  }


  .activity-guide-stage .activity-checklist-item {
    font-size: 17px;
  }

}

/* =====================================================
   LOGO · PLAN CUADRIENAL
===================================================== */

.home-plan-brand {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 24px;
}

.home-plan-logo {
  display: block;
  width: 190px;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}


/* MÓVIL */
@media (max-width: 768px) {

  .home-plan-brand {
    margin-bottom: 18px;
  }

  .home-plan-logo {
    width: 170px;
  }

}

/* =========================================================
   CATÁLOGO DE CURSOS · CATEGORÍA ABIERTA
   Mayor diferenciación visual
========================================================= */

/* Categoría activa */
#screen-home .home-course-category.open {
  background: #F7FBFA;
  border-color: var(--hyc-mint-500);
  box-shadow:
    0 4px 14px rgba(52, 106, 93, 0.08);
}


/* Cabecera de categoría abierta */
#screen-home .home-course-category.open
.home-course-category-button {
  background: var(--hyc-mint-50);
  border-bottom:
    1px solid var(--hyc-mint-200);
}


/* Título de categoría abierta */
#screen-home .home-course-category.open
.home-course-category-title {
  color: var(--hyc-action);
}


/* Panel que contiene los cursos */
#screen-home .home-course-category.open
.home-course-category-panel {
  padding:
    18px
    20px
    20px;

  gap: 14px;

  background:
    #F7FBFA;
}


/* Cada curso se convierte en una tarjeta secundaria */
#screen-home .home-course-category.open
.home-course-item,
#screen-home .home-course-category.open
.home-course-item:nth-child(odd),
#screen-home .home-course-category.open
.home-course-item:nth-child(even) {

  padding: 20px;

  background:
    #FFFFFF;

  border:
    1px solid
    rgba(101, 102, 106, 0.12);

  border-radius:
    12px;

  box-shadow:
    0 1px 3px rgba(15, 16, 18, 0.03);
}


/* Quitar los separadores del layout antiguo */
#screen-home .home-course-category.open
.home-course-item:nth-child(odd),
#screen-home .home-course-category.open
.home-course-item:nth-child(even),
#screen-home .home-course-category.open
.home-course-item:nth-last-child(-n + 2) {
  border-right:
    1px solid rgba(101, 102, 106, 0.12);

  border-bottom:
    1px solid rgba(101, 102, 106, 0.12);
}


/* Título del curso */
#screen-home .home-course-category.open
.home-course-item-content h4 {
  color:
    var(--hyc-text-strong);

  font-size:
    19px;

  font-weight:
    var(--hyc-fw-semibold);
}


/* Descripción */
#screen-home .home-course-category.open
.home-course-item-content p {
  font-size:
    16px;

  line-height:
    1.6;
}


/* Botones de recursos dentro del curso */
#screen-home .home-course-category.open
.home-course-resource {
  min-height:
    46px;

  padding:
    10px
    16px;

  background:
    #FFFFFF;

  border-color:
    #B9D2CB;

  font-size:
    16px;
}


/* Hover suave */
#screen-home .home-course-category.open
.home-course-resource:hover {
  background:
    var(--hyc-action-soft);

  border-color:
    var(--hyc-action);
}


/* =========================================================
   MÓVIL
========================================================= */

@media (max-width: 700px) {

  #screen-home .home-course-category.open
  .home-course-category-panel {
    padding:
      14px;

    gap:
      12px;
  }


  #screen-home .home-course-category.open
  .home-course-item,
  #screen-home .home-course-category.open
  .home-course-item:nth-child(odd),
  #screen-home .home-course-category.open
  .home-course-item:nth-child(even) {

    padding:
      18px;

    border:
      1px solid
      rgba(101, 102, 106, 0.12);

    border-radius:
      12px;
  }


  #screen-home .home-course-category.open
  .home-course-item-content h4 {
    font-size:
      18px;
  }


  #screen-home .home-course-category.open
  .home-course-item-content p {
    font-size:
      16px;
  }


  #screen-home .home-course-category.open
  .home-course-resource {
    min-height:
      46px;

    font-size:
      16px;
  }

}

/* =========================================================
   ICONO DE DESCARGA · RECURSOS DEL CATÁLOGO DE CURSOS
   El azul se reserva para acciones informativas/descarga.
========================================================= */

#screen-home .home-course-resource {
  gap: 8px;
}

#screen-home .home-course-resource-icon {
  width: 22px;
  height: 22px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 22px;

  color: var(--hyc-info-text);
  background: var(--hyc-info-bg);

  border-radius: 6px;
}

#screen-home .home-course-resource-icon svg {
  width: 14px;
  height: 14px;

  display: block;

  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#screen-home .home-course-resource-label {
  display: inline-block;
}

#screen-home .home-course-resource:hover
.home-course-resource-icon {
  background: #DCE9FF;
}

@media (max-width: 700px) {

  #screen-home .home-course-resource-icon {
    width: 24px;
    height: 24px;

    flex-basis: 24px;
  }

  #screen-home .home-course-resource-icon svg {
    width: 15px;
    height: 15px;
  }

}

/* =========================================================
   39. HEADER PRINCIPAL · HOGAR Y CULTURA
   Hacer bien el bien
========================================================= */

#screen-home .home-header {
  position: sticky;
  top: 0;
  z-index: 1000;

  width: 100%;

  background:
    rgba(255, 255, 255, 0.97);

  border-bottom:
    1px solid var(--hyc-border-subtle);

  backdrop-filter:
    blur(12px);

  -webkit-backdrop-filter:
    blur(12px);
}


/* =========================================================
   CONTENEDOR
========================================================= */

#screen-home .home-header-inner {
  width:
    min(100%, 1280px);

  min-height:
    82px;

  margin:
    0 auto;

  padding:
    0 40px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    32px;
}


/* =========================================================
   MARCA + LEMA
========================================================= */

#screen-home .home-header-brand {
  margin:
    0;

  padding:
    0;

  border:
    0;

  background:
    transparent;

  display:
    inline-flex;

  align-items:
    center;

  gap:
    20px;

  color:
    var(--hyc-text-strong);

  font-family:
    inherit;

  cursor:
    pointer;
}


#screen-home .home-header-brand .brand-logo {
  display:
    block;

  width:
    112px;

  max-width:
    none;

  height:
    auto;

  object-fit:
    contain;
}


#screen-home .home-header-divider {
  width:
    1px;

  height:
    34px;

  flex:
    0 0 1px;

  background:
    var(--hyc-mint-500);
}


#screen-home .home-header-motto {
  white-space:
    nowrap;

  color:
    var(--hyc-text-body);

  font-size:
    18px;

  font-weight:
    var(--hyc-fw-regular);

  line-height:
    1.2;
}


#screen-home .home-header-motto strong {
  color: var(--hyc-action);
  font-weight: var(--hyc-fw-semibold);
}


/* =========================================================
   NAVEGACIÓN DESKTOP
========================================================= */

#screen-home .home-header-nav {
  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    6px;

  margin-left:
    auto;
}


#screen-home .home-header-link {
  min-height:
    48px;

  padding:
    10px 13px;

  border:
    0;

  border-radius:
    10px;

  background:
    transparent;

  color:
    var(--hyc-text-strong);

  font-family:
    inherit;

  font-size:
    16px;

  font-weight:
    var(--hyc-fw-medium);

  line-height:
    1.25;

  cursor:
    pointer;

  transition:
    background-color
    var(--hyc-duration)
    var(--hyc-ease),
    color
    var(--hyc-duration)
    var(--hyc-ease);
}


#screen-home .home-header-link:hover {
  background:
    var(--hyc-action-soft);

  color:
    var(--hyc-action);
}


#screen-home .home-header-link:focus-visible,
#screen-home .home-header-register:focus-visible,
#screen-home .home-header-brand:focus-visible,
#screen-home .home-menu-toggle:focus-visible,
#screen-home .home-mobile-menu button:focus-visible {
  outline:
    3px solid
    rgba(47, 113, 101, 0.20);

  outline-offset:
    3px;
}


/* =========================================================
   CTA · REGISTRAR
========================================================= */

#screen-home .home-header-register {
  min-height:
    50px;

  margin-left:
    8px;

  padding:
    11px 22px;

  border:
    1px solid
    var(--hyc-action);

  border-radius:
    999px;

  background:
    var(--hyc-action);

  color:
    #FFFFFF;

  font-family:
    inherit;

  font-size:
    16px;

  font-weight:
    var(--hyc-fw-semibold);

  line-height:
    1.2;

  cursor:
    pointer;

  transition:
    background-color
    var(--hyc-duration)
    var(--hyc-ease),
    transform
    150ms
    ease;
}


#screen-home .home-header-register:hover {
  background:
    var(--hyc-action-hover);
}


#screen-home .home-header-register:active {
  transform:
    scale(0.98);
}


/* =========================================================
   MENÚ HAMBURGUESA
========================================================= */

#screen-home .home-menu-toggle {
  width:
    52px;

  height:
    52px;

  padding:
    0;

  border:
    1px solid
    var(--hyc-border-medium);

  border-radius:
    50%;

  background:
    #FFFFFF;

  display:
    none;

  align-items:
    center;

  justify-content:
    center;

  flex-direction:
    column;

  gap:
    5px;

  cursor:
    pointer;
}


#screen-home .home-menu-toggle span {
  display:
    block;

  width:
    21px;

  height:
    2px;

  border-radius:
    999px;

  background:
    var(--hyc-text-strong);

  transition:
    transform
    180ms
    ease,
    opacity
    180ms
    ease;
}


/* Estado abierto */

#screen-home
.home-menu-toggle.is-open
span:nth-child(1) {
  transform:
    translateY(7px)
    rotate(45deg);
}


#screen-home
.home-menu-toggle.is-open
span:nth-child(2) {
  opacity:
    0;
}


#screen-home
.home-menu-toggle.is-open
span:nth-child(3) {
  transform:
    translateY(-7px)
    rotate(-45deg);
}


/* =========================================================
   MENÚ MÓVIL
========================================================= */

#screen-home .home-mobile-menu {
  width:
    100%;

  padding:
    12px 20px 22px;

  background:
    #FFFFFF;

  border-top:
    1px solid
    var(--hyc-border-subtle);

  box-shadow:
    0 12px 24px
    rgba(15, 16, 18, 0.08);
}


#screen-home .home-mobile-menu[hidden] {
  display:
    none;
}


#screen-home .home-mobile-menu button {
  width:
    100%;

  min-height:
    58px;

  padding:
    14px 8px;

  border:
    0;

  border-bottom:
    1px solid
    var(--hyc-border-subtle);

  background:
    transparent;

  display:
    flex;

  align-items:
    center;

  color:
    var(--hyc-text-strong);

  font-family:
    inherit;

  font-size:
    18px;

  font-weight:
    var(--hyc-fw-medium);

  line-height:
    1.35;

  text-align:
    left;

  cursor:
    pointer;
}


#screen-home
.home-mobile-menu
.home-mobile-register {
  min-height:
    58px;

  margin-top:
    16px;

  padding:
    14px 22px;

  border:
    1px solid
    var(--hyc-action);

  border-radius:
    999px;

  background:
    var(--hyc-action);

  color:
    #FFFFFF;

  justify-content:
    center;

  font-weight:
    var(--hyc-fw-semibold);

  text-align:
    center;
}


/* =========================================================
   SCROLL · COMPENSACIÓN HEADER
========================================================= */

#screen-home #home-programs,
#screen-home #home-courses,
#screen-home #home-contact {
  scroll-margin-top:
    100px;
}


/* =========================================================
   TABLET / DESKTOP MEDIO
========================================================= */

@media (max-width: 1100px) {

  #screen-home .home-header-inner {
    padding:
      0 28px;

    gap:
      22px;
  }


  #screen-home .home-header-brand {
    gap:
      14px;
  }


  #screen-home .home-header-brand .brand-logo {
    width:
      120px;
  }


  #screen-home .home-header-motto {
    font-size:
      16px;
  }


  #screen-home .home-header-link {
    padding:
      10px 9px;

    font-size:
      15px;
  }


  #screen-home .home-header-register {
    padding:
      10px 17px;

    font-size:
      15px;
  }

}


/* =========================================================
   MÓVIL / TABLET PEQUEÑA
========================================================= */

@media (max-width: 860px) {

  #screen-home .home-header {
    position:
      sticky;

    top:
      0;
  }


  #screen-home .home-header-inner {
    min-height:
      76px;

    padding:
      0 20px;

    gap:
      14px;
  }


  #screen-home .home-header-nav {
    display:
      none;
  }


  #screen-home .home-menu-toggle {
    display:
      flex;
  }


  #screen-home .home-header-brand {
    min-width:
      0;

    gap:
      12px;
  }


  #screen-home .home-header-brand .brand-logo {
    width:
      120px;
  }


  #screen-home .home-header-divider {
    height:
      50px;
  }


  #screen-home .home-header-motto {
    font-size:
      16px;
  }


  #screen-home #home-programs,
  #screen-home #home-courses,
  #screen-home #home-contact {
    scroll-margin-top:
      92px;
  }

}


/* =========================================================
   MÓVIL
========================================================= */

@media (max-width: 520px) {

  #screen-home .home-header-inner {
    min-height:
      72px;

    padding:
      0 16px;
  }


  #screen-home .home-header-brand {
    gap:
      10px;
  }


  #screen-home .home-header-brand .brand-logo {
    width:
      82px;
  }


  #screen-home .home-header-divider {
    height:
      27px;
  }


#screen-home .home-header-motto {
  font-size: 15px;
  line-height: 1.25;
  white-space: normal;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
}

#screen-home .home-header-motto strong {
  display: block;
  color: var(--hyc-action);
  font-weight: var(--hyc-fw-semibold);
}


  #screen-home .home-menu-toggle {
    width:
      48px;

    height:
      48px;

    flex:
      0
      0
      48px;
  }

}


/* Móviles especialmente angostos */

@media (max-width: 380px) {

  #screen-home .home-header-brand .brand-logo {
    width:
      72px;
  }


  #screen-home .home-header-divider {
    display:
      none;
  }


#screen-home .home-header-motto {
  font-size: 15px;
  line-height: 1.25;
  white-space: normal;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
}

#screen-home .home-header-motto strong {
  display: block;
  color: var(--hyc-action);
  font-weight: var(--hyc-fw-semibold);
}

}


/* =========================================================
   40. HOME · AJUSTE FINAL UX/UI 50+
   Claridad, jerarquía, accesibilidad y menor ruido visual
========================================================= */

/* Contraste de lectura ligeramente mayor */
:root {
  --hyc-text-body: #55575B;
}


/* ---------------------------------------------------------
   HEADER · MÁS IDENTIDAD SIN ROBAR ESPACIO
--------------------------------------------------------- */

#screen-home .home-header-inner {
  min-height: 88px;
}

#screen-home .home-header-brand .brand-logo {
  width: 132px;
}

#screen-home .home-header-divider {
  height: 38px;
}

#screen-home .home-header-motto {
  font-size: 18px;
}

#screen-home .home-header-link {
  min-height: 50px;
  font-size: 16px;
}

#screen-home .home-header-register {
  min-height: 52px;
  padding-inline: 24px;
  font-size: 16px;
}


/* ---------------------------------------------------------
   HERO · DECISIÓN PRINCIPAL MUY CLARA
--------------------------------------------------------- */

#screen-home .home-main h1 {
  font-size: clamp(38px, 3.2vw, 46px);
  line-height: 1.16;
}

#screen-home .lead-copy {
  max-width: 600px;
  font-size: 18px;
  line-height: 1.65;
}

#screen-home .home-returning-title {
  font-size: 17px;
}

#screen-home .home-returning-copy {
  font-size: 16px;
  line-height: 1.55;
}


/* ---------------------------------------------------------
   SECCIONES · ESCALA Y RITMO
--------------------------------------------------------- */

#screen-home .home-section h2 {
  font-size: clamp(30px, 2.5vw, 36px);
  line-height: 1.2;
}

#screen-home .home-section-intro {
  font-size: 18px;
  line-height: 1.65;
}


/* ---------------------------------------------------------
   PROGRAMAS · LECTURA CÓMODA
--------------------------------------------------------- */

#screen-home .home-program-header h3 {
  font-size: 21px;
}

#screen-home .home-program-description {
  font-size: 17px;
  line-height: 1.65;
}

#screen-home .home-program-status {
  font-size: 16px;
  line-height: 1.55;
}

#screen-home .home-program-cta {
  min-height: 58px;
  font-size: 17px;
}


/* ---------------------------------------------------------
   PLAN CUADRIENAL · TEXTOS SECUNDARIOS LEGIBLES
--------------------------------------------------------- */

#screen-home .home-plan-platform-label {
  font-size: 12px;
  line-height: 1.5;
}

#screen-home .home-plan-platform p {
  font-size: 16px;
  line-height: 1.65;
}


/* ---------------------------------------------------------
   CURSOS · ACORDEONES AUTOEXPLICATIVOS
--------------------------------------------------------- */

#screen-home .home-course-category-button {
  min-height: 70px;
  padding: 18px 20px;
}

#screen-home .home-course-category-title {
  font-size: 18px;
  line-height: 1.4;
}

#screen-home .home-course-category-meta {
  font-size: 16px;
  font-weight: var(--hyc-fw-medium);
  color: var(--hyc-text-body);
}

#screen-home .home-course-category.open
.home-course-category-meta {
  color: var(--hyc-action);
}

#screen-home .home-course-category-chevron {
  width: 24px;
  height: 24px;
  font-size: 20px;
}

#screen-home .home-course-item-content h4 {
  font-size: 19px;
}

#screen-home .home-course-item-content p {
  font-size: 16px;
  line-height: 1.6;
}

#screen-home .home-course-resource {
  min-height: 48px;
  padding: 10px 16px;
  font-size: 16px;
}


/* ---------------------------------------------------------
   IMPACTO · PROCESO EN 3 PASOS
--------------------------------------------------------- */

#screen-home .home-impact-item {
  min-height: 108px;
  padding: 20px;
  gap: 16px;
}

#screen-home .home-impact-icon {
  width: 40px;
  height: 40px;
  flex-basis: 40px;

  font-size: 18px;
  font-weight: var(--hyc-fw-semibold);
}

#screen-home .home-impact-item h3 {
  font-size: 18px;
}

#screen-home .home-impact-item p {
  font-size: 16px;
  line-height: 1.55;
}


/* ---------------------------------------------------------
   CONTACTO · COMPACTO PERO FÁCIL DE USAR
--------------------------------------------------------- */

#screen-home .support-section {
  padding-top: 44px;
  padding-bottom: 38px;
}

#screen-home .support-title {
  margin-bottom: 22px;
  font-size: 24px;
}

#screen-home .support-whatsapp {
  min-height: 62px;
  font-size: 18px;
}

#screen-home .support-brand {
  margin-top: 24px;
  font-size: 15px;
}


/* ---------------------------------------------------------
   INTERACCIÓN Y ACCESIBILIDAD
--------------------------------------------------------- */

#screen-home .home-course-category-button,
#screen-home .home-program-cta,
#screen-home .home-header-link,
#screen-home .home-header-register,
#screen-home .support-whatsapp {
  -webkit-tap-highlight-color: transparent;
}

#screen-home .home-course-category-button:focus-visible,
#screen-home .home-program-cta:focus-visible,
#screen-home .support-whatsapp:focus-visible {
  outline: 3px solid rgba(47, 113, 101, 0.22);
  outline-offset: 3px;
}


/* ---------------------------------------------------------
   TABLET
--------------------------------------------------------- */

@media (max-width: 1100px) {

  #screen-home .home-header-brand .brand-logo {
    width: 118px;
  }

  #screen-home .home-header-inner {
    min-height: 84px;
  }

}


/* ---------------------------------------------------------
   MÓVIL · DISEÑADO PARA LECTURA Y TOUCH
--------------------------------------------------------- */

@media (max-width: 860px) {

  #screen-home .home-header-inner {
    min-height: 78px;
  }

  #screen-home .home-header-brand .brand-logo {
    width: 104px;
  }

  #screen-home .home-header-divider {
    height: 34px;
  }

}


@media (max-width: 700px) {

  #screen-home .home-main h1 {
    font-size: 34px;
    line-height: 1.18;
  }

  #screen-home .lead-copy,
  #screen-home .home-section-intro {
    font-size: 18px;
  }

  #screen-home .home-section h2 {
    font-size: 30px;
  }

  #screen-home .home-course-category-button {
    min-height: 66px;
    padding: 16px;
    gap: 10px;
  }

  #screen-home .home-course-category-title {
    font-size: 17px;
  }

  #screen-home .home-course-category-meta {
    font-size: 15px;
  }

  #screen-home .home-course-category-chevron {
    width: 22px;
    height: 22px;
    font-size: 19px;
  }

  #screen-home .home-course-resource {
    min-height: 48px;
    font-size: 16px;
  }

  #screen-home .home-impact-item {
    min-height: 0;
  }

}


@media (max-width: 520px) {

  #screen-home .home-header-brand .brand-logo {
    width: 94px;
  }

  #screen-home .home-header-divider {
    height: 34px;
  }

  #screen-home .home-header-motto {
    font-size: 15px;
    line-height: 1.25;
  }

  #screen-home .home-primary-action,
  #screen-home .home-returning-action {
    max-width: none;
  }

  #screen-home .home-program-card {
    padding: 26px 22px 24px;
  }

}


/* Respeta preferencia de movimiento reducido */
@media (prefers-reduced-motion: reduce) {

  html {
    scroll-behavior: auto !important;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }

}

/* =========================================================
   HOME · HERO DOS COLUMNAS · AJUSTE FINAL
========================================================= */

#screen-home .home-main.home-main-split {
  width: 100%;
  max-width: 1120px;

  margin-left: auto;
  margin-right: auto;

  padding:
    50px
    20px
    56px;

  display: grid;

  grid-template-columns:
    minmax(0, 1.18fr)
    minmax(360px, 0.82fr);

  gap: 64px;

  /* IMPORTANTE */
  align-items: start;
}


/* =========================================================
   COLUMNA IZQUIERDA
========================================================= */

#screen-home .home-main-content {
  min-width: 0;
}


#screen-home .home-main-content .eyebrow {
  margin: 0;
}


#screen-home .home-main-content h1 {
  margin:
    10px
    0
    0;
}


#screen-home .home-main-content .lead-copy {
  max-width: 570px;

  margin-top: 24px;
}


#screen-home .home-primary-action {
  margin-top: 28px;
}


/* =========================================================
   TARJETA DERECHA
========================================================= */

#screen-home .home-returning-action {
  width: 100%;
  max-width: none;

  /* IMPORTANTE: ya no debe tener margen vertical */
  margin: 0;

  padding:
    32px
    36px;

  background:
    #FBFCFC;

  border:
    1px solid
    var(--hyc-border-subtle);

  border-radius: 22px;

  /* La subimos visualmente para alinearla
     con el contenido principal */
  align-self: start;
}


#screen-home .home-returning-title {
  margin: 0;
}


#screen-home .home-returning-copy {
  margin:
    16px
    0
    20px;
}


/* =========================================================
   EVITAR ALTURA EXCESIVA DEL HERO
========================================================= */

#screen-home .home-hero {
  min-height: 0 !important;
  height: auto !important;

  padding: 0 !important;
}


/* Si alguna regla anterior estaba
   forzando altura mínima */
#screen-home .home-main {
  min-height: 0 !important;
  height: auto !important;
}

/* =========================================================
   HOME HERO · CORRECCIÓN DEFINITIVA DE GRID
========================================================= */

@media (min-width: 701px) {

  #screen-home .home-main.home-main-split {
    display: grid;

    grid-template-columns:
      minmax(0, 1.18fr)
      minmax(360px, 0.82fr);

    gap: 64px;

    align-items: start;
  }


  /* Columna izquierda */
  #screen-home .home-main.home-main-split
  > .home-main-content {
    grid-column: 1;
    grid-row: 1;

    min-width: 0;
  }


  /* Columna derecha */
  #screen-home .home-main.home-main-split
  > .home-returning-action {
    grid-column: 2;

    /* ANULA la regla antigua grid-row: 4 / span 2 */
    grid-row: 1;

    align-self: start;

    margin: 0;
  }

}

/* =========================================================
   HOME HERO · RESPONSIVE MÓVIL DEFINITIVO
========================================================= */

@media (max-width: 700px) {

  #screen-home .home-main.home-main-split {
    display: block;

    width: 100%;
    max-width: none;

    padding:
      34px
      20px
      42px;

    margin: 0;

    /* Anula por completo el grid desktop */
    grid-template-columns: none;
    gap: 0;
  }


  /* -----------------------------------------
     COLUMNA PRINCIPAL
  ----------------------------------------- */

  #screen-home .home-main-content {
    width: 100%;
    min-width: 0;
  }


  #screen-home .home-main-content .eyebrow {
    max-width: 100%;

    margin: 0;

    font-size: 13px;
    line-height: 1.45;
  }


  #screen-home .home-main-content h1 {
    width: 100%;
    max-width: 100%;

    margin-top: 10px;

    font-size: 36px;
    line-height: 1.16;

    overflow-wrap: normal;
    word-break: normal;
  }


  #screen-home .home-main-content .lead-copy {
    width: 100%;
    max-width: none;

    margin-top: 20px;

    font-size: 18px;
    line-height: 1.6;

    overflow-wrap: normal;
    word-break: normal;
  }


  /* -----------------------------------------
     CTA PRINCIPAL
  ----------------------------------------- */

  #screen-home .home-primary-action {
    width: 100%;
    max-width: none;

    margin-top: 26px;
  }


  #screen-home .home-primary-action .btn {
    width: 100%;

    min-width: 0;

    min-height: 58px;
  }


  /* -----------------------------------------
     TARJETA MIS ACTIVIDADES
  ----------------------------------------- */

  #screen-home .home-returning-action {
    width: 100%;
    max-width: none;

    margin-top: 28px;

    padding:
      24px
      22px;

    border-radius: 18px;
  }


  #screen-home .home-returning-title {
    font-size: 19px;
    line-height: 1.4;
  }


  #screen-home .home-returning-copy {
    margin:
      12px
      0
      18px;

    font-size: 17px;
    line-height: 1.55;
  }


  #screen-home .home-returning-action .btn {
    width: 100%;

    min-height: 58px;

    font-size: 17px;
  }

}

/* =========================================================
   HOME · ZONAS DE ATENCIÓN PRIORITARIA
========================================================= */

#screen-home .home-priority-section {
  background: #F8FAF9;
  border-top: 1px solid var(--hyc-border-subtle);
  border-bottom: 1px solid var(--hyc-border-subtle);
}


#screen-home .home-priority-inner {
  width: 100%;
  max-width: 1120px;

  margin: 0 auto;

  padding:
    64px
    20px
    60px;
}


/* =========================================================
   ENCABEZADO
========================================================= */

#screen-home .home-priority-header {
  display: grid;

  grid-template-columns:
    minmax(0, 0.95fr)
    minmax(0, 1.05fr);

  gap: 72px;

  align-items: start;

  margin-bottom: 34px;
}


#screen-home .home-priority-heading .eyebrow {
  margin: 0;

  color: var(--hyc-text-brand);

  font-size: 13px;
  font-weight: 600;

  letter-spacing: 0.14em;
  text-transform: uppercase;
}


#screen-home .home-priority-heading h2 {
  margin:
    10px
    0
    0;

  color:
    var(--hyc-text-strong);

  font-size:
    clamp(30px, 3vw, 40px);

  font-weight: 400;

  line-height: 1.18;

  letter-spacing: -0.02em;
}


#screen-home .home-priority-heading .mint-rule {
  width: 48px;
  height: 2px;

  margin-top: 18px;

  background:
    var(--hyc-mint-500);
}


#screen-home .home-priority-intro p {
  margin: 0;

  color:
    var(--hyc-text-body);

  font-size: 18px;

  line-height: 1.65;
}


/* =========================================================
   MAPA
========================================================= */

#screen-home .home-priority-map-wrap {
  width: 100%;

  overflow: hidden;

  background: #FFFFFF;

  border:
    1px solid
    var(--hyc-border-subtle);

  border-radius: 18px;
}


#screen-home .home-priority-map {
  display: block;

  width: 100%;
  height: 520px;

  border: 0;
}


/* =========================================================
   LEYENDA + CTA
========================================================= */

#screen-home .home-priority-footer {
  display: flex;

  align-items: flex-end;

  justify-content: space-between;

  gap: 32px;

  margin-top: 24px;
}


#screen-home .home-priority-legend {
  min-width: 0;
}


#screen-home .home-priority-legend-title {
  margin-bottom: 14px;

  color:
    var(--hyc-text-body);

  font-size: 13px;

  font-weight: 600;

  letter-spacing: 0.12em;

  text-transform: uppercase;
}


#screen-home .home-priority-legend-items {
  display: flex;

  flex-wrap: wrap;

  gap:
    12px
    24px;
}


#screen-home .home-priority-legend-item {
  display: inline-flex;

  align-items: center;

  gap: 8px;

  color:
    var(--hyc-text-body);

  font-size: 16px;
}


#screen-home .priority-dot {
  width: 10px;
  height: 10px;

  flex:
    0 0 10px;

  border-radius: 999px;
}


#screen-home .priority-dot-very-high {
  background: #6D3B33;
}


#screen-home .priority-dot-high {
  background: #B63A31;
}


#screen-home .priority-dot-medium {
  background: #D98B26;
}


#screen-home .priority-dot-low {
  background: #78A934;
}


#screen-home .priority-dot-very-low {
  background: #28724E;
}


#screen-home .home-priority-map-button {
  flex: 0 0 auto;

  min-width: 245px;

  min-height: 54px;

  font-size: 17px;
}


/* =========================================================
   FUENTE
========================================================= */

#screen-home .home-priority-source {
  max-width: 820px;

  margin-top: 24px;

  padding-top: 20px;

  border-top:
    1px solid
    var(--hyc-border-subtle);

  color:
    var(--hyc-text-muted);

  font-size: 15px;

  line-height: 1.6;
}


/* =========================================================
   MÓVIL
========================================================= */

@media (max-width: 700px) {

  #screen-home .home-priority-inner {
    padding:
      42px
      20px
      46px;
  }


  #screen-home .home-priority-header {
    display: block;

    margin-bottom: 26px;
  }


  #screen-home .home-priority-heading h2 {
    font-size: 30px;
  }


  #screen-home .home-priority-intro {
    margin-top: 24px;
  }


  #screen-home .home-priority-intro p {
    font-size: 17px;
  }


  #screen-home .home-priority-map {
    height: 420px;
  }


  #screen-home .home-priority-footer {
    display: block;

    margin-top: 22px;
  }


  #screen-home .home-priority-legend-items {
    gap:
      12px
      18px;
  }


  #screen-home .home-priority-legend-item {
    font-size: 15px;
  }


  #screen-home .home-priority-map-button {
    width: 100%;

    min-width: 0;

    margin-top: 24px;
  }


  #screen-home .home-priority-source {
    font-size: 14px;
  }

}

/* =========================================================
   ZONAS PRIORITARIAS · FOOTER CORREGIDO
========================================================= */

#screen-home .home-priority-footer {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    auto;

  gap: 32px;

  align-items: end;

  margin-top: 24px;
}


#screen-home .home-priority-legend {
  min-width: 0;
  width: 100%;
}


#screen-home .home-priority-legend-title {
  margin-bottom: 14px;

  color:
    var(--hyc-text-body);

  font-size: 13px;
  font-weight: 600;

  line-height: 1.4;

  letter-spacing: 0.12em;
  text-transform: uppercase;

  white-space: nowrap;
}


#screen-home .home-priority-legend-items {
  display: flex;

  flex-wrap: wrap;

  gap:
    12px
    24px;

  align-items: center;
}


#screen-home .home-priority-legend-item {
  display: inline-flex;

  align-items: center;

  gap: 8px;

  color:
    var(--hyc-text-body);

  font-size: 16px;

  line-height: 1.4;

  white-space: nowrap;
}


#screen-home .home-priority-map-button {
  width: auto;

  min-width: 250px;
  max-width: 300px;

  min-height: 54px;

  padding:
    0
    24px;

  justify-self: end;

  font-size: 17px;

  white-space: nowrap;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

  #screen-home .home-priority-footer {
    grid-template-columns:
      1fr;

    gap: 22px;
  }


  #screen-home .home-priority-map-button {
    width: 100%;

    max-width: none;

    justify-self: stretch;
  }

}


/* =========================================================
   MÓVIL
========================================================= */

@media (max-width: 700px) {

  #screen-home .home-priority-legend-title {
    white-space: normal;
  }


  #screen-home .home-priority-legend-items {
    display: grid;

    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    gap:
      12px
      18px;
  }


  #screen-home .home-priority-legend-item {
    white-space: normal;
  }


  #screen-home .home-priority-map-button {
    width: 100%;

    min-width: 0;

    max-width: none;

    margin-top: 4px;
  }

}

/* =========================================================
   HOME · TIRA FOTOGRÁFICA DE PROGRAMAS
========================================================= */

#screen-home .home-program-photos {
  margin: 0;
  padding: 0;

  /* Separa visualmente las fotos del bloque de programas */
  background: #F7F9F8;

  border-top: 1px solid var(--hyc-border-subtle);
}


#screen-home .home-program-photos-inner {
  width: 100%;
  max-width: 1120px;

  margin: 0 auto;

  padding:
    26px
    20px
    34px;

  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: 12px;
}


/* -----------------------------------------
   FOTO
----------------------------------------- */

#screen-home .home-program-photo-item {
  position: relative;

  overflow: hidden;

  min-width: 0;

  height: 300px;

  margin: 0;

  background: #FFFFFF;

  border-radius: 16px;

  box-shadow:
    0 1px 2px rgba(31, 43, 55, 0.05);
}


#screen-home .home-program-photo-item img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;

  transition:
    transform
    0.35s
    ease;
}


/* -----------------------------------------
   AJUSTE DE ENCUADRE POR FOTO
----------------------------------------- */

/* Transformando Vidas */
#screen-home
.home-program-photo-item:nth-child(1)
img {
  object-position: center 58%;
}


/* Jornadas Sociales */
#screen-home
.home-program-photo-item:nth-child(2)
img {
  object-position: center 45%;
}


/* Súmate 1+1 */
#screen-home
.home-program-photo-item:nth-child(3)
img {
  object-position: center 42%;
}


/* -----------------------------------------
   HOVER SOLO DESKTOP
----------------------------------------- */

@media (hover: hover) {

  #screen-home
  .home-program-photo-item:hover
  img {
    transform: scale(1.025);
  }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

  #screen-home
  .home-program-photos-inner {
    padding:
      30px
      20px
      32px;

    gap: 10px;
  }


  #screen-home
  .home-program-photo-item {
    height: 250px;
  }

}


/* =========================================================
   MÓVIL
========================================================= */

@media (max-width: 700px) {

  #screen-home
  .home-program-photos-inner {
    padding:
      28px
      20px
      30px;

    display: grid;

    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    gap: 10px;
  }


  /* Foto principal */
  #screen-home
  .home-program-photo-item:first-child {
    grid-column:
      1 / -1;

    height: 270px;
  }


  /* Fotos secundarias */
  #screen-home
  .home-program-photo-item:nth-child(2),

  #screen-home
  .home-program-photo-item:nth-child(3) {
    height: 190px;
  }


  #screen-home
  .home-program-photo-item {
    border-radius: 14px;
  }


  /* Ajustes especiales móvil */

  #screen-home
  .home-program-photo-item:nth-child(1)
  img {
    object-position:
      center
      56%;
  }


  #screen-home
  .home-program-photo-item:nth-child(2)
  img {
    object-position:
      center
      42%;
  }


  #screen-home
  .home-program-photo-item:nth-child(3)
  img {
    object-position:
      center
      40%;
  }

}
/* =========================================================
   41. PROPUESTA DE CURSO · TRANSFORMANDO VIDAS
   Bloque en HOME + formulario + confirmación
========================================================= */

/* ---------------------------------------------------------
   HOME · BLOQUE "PROPONER UN CURSO"
--------------------------------------------------------- */

#screen-home .home-course-proposal {
  width: 100%;
  max-width: 1120px;

  margin:
    30px
    auto
    0;

  padding:
    26px
    28px;

  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    auto;

  align-items: center;

  gap:
    28px;

  background:
    #F7F9F8;

  border:
    1px solid
    var(--hyc-border-subtle);

  border-radius:
    18px;

  box-shadow:
    var(--hyc-shadow-card);
}


#screen-home .home-course-proposal-content {
  min-width: 0;

  display: flex;

  align-items: flex-start;

  gap:
    18px;
}


#screen-home .home-course-proposal-icon {
  width:
    48px;

  height:
    48px;

  flex:
    0
    0
    48px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  color:
    var(--hyc-action);

  background:
    var(--hyc-action-soft);

  border:
    1px solid
    var(--hyc-success-border);

  border-radius:
    14px;

  font-size:
    30px;

  font-weight:
    var(--hyc-fw-regular);

  line-height:
    1;
}


#screen-home .home-course-proposal-text {
  min-width: 0;
}


#screen-home .home-course-proposal-text h3 {
  margin:
    0;

  color:
    var(--hyc-text-strong);

  font-size:
    21px;

  font-weight:
    var(--hyc-fw-semibold);

  line-height:
    1.35;
}


#screen-home .home-course-proposal-text p {
  max-width:
    680px;

  margin:
    8px
    0
    0;

  color:
    var(--hyc-text-body);

  font-size:
    17px;

  line-height:
    1.6;
}


#screen-home .home-course-proposal-button {
  width:
    auto;

  min-width:
    210px;

  min-height:
    56px;

  margin: 0;

  padding:
    0
    22px;

  white-space:
    nowrap;

  flex:
    0
    0
    auto;
}


#screen-home .home-course-proposal-button span {
  font-size:
    18px;

  line-height:
    1;
}


#screen-home .home-course-proposal:hover {
  border-color:
    rgba(52, 106, 93, 0.22);
}


/* ---------------------------------------------------------
   FORMULARIO · PROPUESTA DE CURSO
--------------------------------------------------------- */

#screen-course-proposal {
  max-width:
    760px;
}


#screen-course-proposal .form-container {
  max-width:
    700px;

  margin:
    0
    auto;

  padding-bottom:
    56px;
}


#screen-course-proposal .form-intro {
  max-width:
    620px;
}


#screen-course-proposal .subheading {
  margin-bottom:
    6px;
}


#screen-course-proposal .section-divider {
  margin:
    30px
    0;
}


/* Radios Sí / No */

#screen-course-proposal .proposal-radio-options {
  display:
    grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap:
    12px;
}


#screen-course-proposal .proposal-radio-options
.check-option {
  min-height:
    62px;

  margin:
    0;

  padding:
    14px
    16px;

  display:
    flex;

  align-items:
    center;

  gap:
    12px;

  background:
    var(--hyc-bg-surface);

  border:
    1.5px solid
    var(--hyc-border-field);

  border-radius:
    var(--hyc-radius-field);

  font-size:
    18px;

  font-weight:
    var(--hyc-fw-regular);

  line-height:
    1.4;

  cursor:
    pointer;
}


#screen-course-proposal .proposal-radio-options
.check-option:hover {
  background:
    var(--hyc-bg-app);
}


#screen-course-proposal .proposal-radio-options
.check-option:has(input:checked) {
  color:
    var(--hyc-action);

  background:
    var(--hyc-action-soft);

  border-color:
    var(--hyc-action);
}


#screen-course-proposal .proposal-radio-options
.check-option input {
  width:
    26px;

  height:
    26px;

  min-height:
    auto;

  flex:
    0
    0
    26px;

  margin:
    0;

  accent-color:
    var(--hyc-action);
}


/* ---------------------------------------------------------
   ARCHIVO ADJUNTO
--------------------------------------------------------- */

#screen-course-proposal input[type="file"] {
  min-height:
    58px;

  padding:
    10px
    12px;

  display:
    flex;

  align-items:
    center;

  background:
    var(--hyc-bg-surface);

  border:
    1.5px dashed
    var(--hyc-border-upload);

  border-radius:
    var(--hyc-radius-field);

  color:
    var(--hyc-text-body);

  font-size:
    16px;

  cursor:
    pointer;
}


#screen-course-proposal input[type="file"]:hover {
  background:
    var(--hyc-action-soft);
}


#screen-course-proposal input[type="file"]::file-selector-button {
  min-height:
    38px;

  margin-right:
    12px;

  padding:
    8px
    14px;

  border:
    1px solid
    #B9D2CB;

  border-radius:
    999px;

  background:
    #FFFFFF;

  color:
    var(--hyc-action);

  font-family:
    inherit;

  font-size:
    15px;

  font-weight:
    var(--hyc-fw-semibold);

  cursor:
    pointer;
}


/* ---------------------------------------------------------
   AVISO ANTES DE ENVIAR
--------------------------------------------------------- */

#screen-course-proposal .course-proposal-notice {
  margin:
    8px
    0
    22px;

  padding:
    18px
    20px;

  color:
    var(--hyc-text-body);

  background:
    var(--hyc-info-bg);

  border:
    1px solid
    var(--hyc-info-border);

  border-radius:
    var(--hyc-radius-panel);

  font-size:
    16px;

  line-height:
    1.6;
}


#screen-course-proposal .course-proposal-notice strong {
  display:
    block;

  margin-bottom:
    4px;

  color:
    var(--hyc-info-text);

  font-size:
    16px;

  font-weight:
    var(--hyc-fw-semibold);
}


#screen-course-proposal .course-proposal-notice p {
  margin:
    0;

  color:
    var(--hyc-text-body);
}


/* ---------------------------------------------------------
   BOTÓN DE ENVÍO
--------------------------------------------------------- */

#screen-course-proposal #btn-submit-course-proposal {
  margin-top:
    4px;
}


/* ---------------------------------------------------------
   CONFIRMACIÓN DE PROPUESTA
--------------------------------------------------------- */

#screen-course-proposal-success {
  max-width:
    620px;
}


#screen-course-proposal-success .success-container {
  min-height:
    100vh;

  justify-content:
    flex-start;
}


#screen-course-proposal-success .success-card {
  margin-top:
    26px;
}


#screen-course-proposal-success .success-summary {
  font-size:
    16px;

  line-height:
    1.6;
}


/* =========================================================
   PROPUESTA DE CURSO · TABLET
========================================================= */

@media (max-width: 900px) {

  #screen-home .home-course-proposal {
    grid-template-columns:
      1fr;

    gap:
      20px;

    padding:
      24px;
  }


  #screen-home .home-course-proposal-button {
    width:
      100%;

    min-width:
      0;
  }

}


/* =========================================================
   PROPUESTA DE CURSO · MÓVIL
========================================================= */

@media (max-width: 700px) {

  #screen-home .home-course-proposal {
    margin-top:
      24px;

    padding:
      22px
      20px;

    gap:
      20px;

    border-radius:
      16px;
  }


  #screen-home .home-course-proposal-content {
    gap:
      14px;
  }


  #screen-home .home-course-proposal-icon {
    width:
      44px;

    height:
      44px;

    flex-basis:
      44px;

    border-radius:
      12px;

    font-size:
      27px;
  }


  #screen-home .home-course-proposal-text h3 {
    font-size:
      20px;

    line-height:
      1.35;
  }


  #screen-home .home-course-proposal-text p {
    font-size:
      17px;

    line-height:
      1.6;
  }


  #screen-home .home-course-proposal-button {
    width:
      100%;

    min-height:
      58px;

    font-size:
      18px;
  }


  #screen-course-proposal .form-container {
    max-width:
      none;

    padding-left:
      22px;

    padding-right:
      22px;

    padding-bottom:
      42px;
  }


  #screen-course-proposal .proposal-radio-options {
    grid-template-columns:
      1fr;
  }


  #screen-course-proposal .proposal-radio-options
  .check-option {
    min-height:
      60px;

    font-size:
      18px;
  }


  #screen-course-proposal input[type="file"] {
    min-height:
      62px;

    font-size:
      16px;
  }


  #screen-course-proposal .course-proposal-notice {
    padding:
      17px
      18px;

    font-size:
      16px;
  }

}


/* =========================================================
   PROPUESTA DE CURSO · MÓVIL MUY PEQUEÑO
========================================================= */

@media (max-width: 380px) {

  #screen-home .home-course-proposal-content {
    display:
      block;
  }


  #screen-home .home-course-proposal-icon {
    margin-bottom:
      14px;
  }

}

/* =========================================================
   42. HEADER HOME · MENÚ MÓVIL DEFINITIVO
   Corrige el dropdown para que no rompa el layout del header
========================================================= */

@media (max-width: 860px) {

  #screen-home .home-header {
    position: sticky;
    top: 0;
    z-index: 1200;
    overflow: visible;
    background: rgba(255, 255, 255, 0.98);
  }

  #screen-home .home-header-inner {
    position: relative;
    width: 100%;
    max-width: 1280px;
    min-height: 78px;
    margin: 0 auto;
    padding: 0 20px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
  }

  #screen-home .home-header-nav {
    display: none;
  }

  #screen-home .home-header-brand {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 12px;
  }

  #screen-home .home-header-brand .brand-logo {
    width: 104px;
    height: auto;
    flex: 0 0 auto;
  }

  #screen-home .home-header-divider {
    width: 1px;
    height: 34px;
    flex: 0 0 1px;
  }

  #screen-home .home-header-motto {
    min-width: 0;
    color: var(--hyc-text-body);
    font-size: 16px;
    line-height: 1.25;
    white-space: normal;
  }

  #screen-home .home-menu-toggle {
    position: relative;
    z-index: 1202;

    display: flex;
    width: 48px;
    height: 48px;
    flex: 0 0 48px;

    margin: 0;
    padding: 0;

    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;

    border: 0;
    border-radius: 12px;

    background: transparent;
    cursor: pointer;
  }

  #screen-home .home-menu-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--hyc-text-strong);
    border-radius: 999px;
  }

  #screen-home .home-mobile-menu {
    position: absolute;

    top: calc(100% - 1px);
    right: 16px;
    left: auto;

    z-index: 1201;

    width: min(320px, calc(100vw - 32px));
    margin: 0;
    padding: 12px 18px 18px;

    background: #FFFFFF;

    border: 1px solid rgba(31, 45, 57, 0.08);
    border-radius: 0 0 16px 16px;

    box-shadow:
      0 16px 34px
      rgba(31, 45, 57, 0.14);
  }

  #screen-home .home-mobile-menu[hidden] {
    display: none !important;
  }

  #screen-home .home-mobile-menu button {
    width: 100%;
    min-height: 54px;
    margin: 0;
    padding: 12px 8px;

    display: flex;
    align-items: center;

    border: 0;
    border-bottom: 1px solid var(--hyc-border-subtle);

    background: transparent;

    color: var(--hyc-text-strong);

    font-family: inherit;
    font-size: 17px;
    font-weight: var(--hyc-fw-medium);
    line-height: 1.35;

    text-align: left;
    cursor: pointer;
  }

  #screen-home .home-mobile-menu .home-mobile-register {
    min-height: 54px;
    margin-top: 16px;
    padding: 12px 20px;

    justify-content: center;

    color: #FFFFFF;
    background: var(--hyc-action);

    border: 1px solid var(--hyc-action);
    border-radius: 999px;

    font-size: 17px;
    font-weight: var(--hyc-fw-semibold);
    text-align: center;
  }

  #screen-home .home-mobile-menu .home-mobile-register:hover {
    background: var(--hyc-action-hover);
  }

  #screen-home #home-programs,
  #screen-home #home-courses,
  #screen-home #home-contact {
    scroll-margin-top: 92px;
  }
}


/* =========================================================
   43. HEADER HOME · MÓVIL
========================================================= */

@media (max-width: 520px) {

  #screen-home .home-header-inner {
    min-height: 74px;
    padding: 0 16px;
    gap: 10px;
  }

  #screen-home .home-header-brand {
    gap: 10px;
  }

  #screen-home .home-header-brand .brand-logo {
    width: 88px;
  }

  #screen-home .home-header-divider {
    height: 30px;
  }

  #screen-home .home-header-motto {
    max-width: 110px;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;

    font-size: 15px;
    line-height: 1.2;
  }

  #screen-home .home-header-motto strong {
    display: block;
  }

  #screen-home .home-menu-toggle {
    width: 46px;
    height: 46px;
    flex-basis: 46px;
  }

  #screen-home .home-mobile-menu {
    right: 12px;
    width: min(300px, calc(100vw - 24px));
    padding: 10px 18px 18px;
  }

  #screen-home .home-mobile-menu button {
    min-height: 52px;
    font-size: 17px;
  }

  #screen-home .home-mobile-menu .home-mobile-register {
    min-height: 54px;
    font-size: 17px;
  }
}


/* =========================================================
   44. HEADER HOME · MÓVIL MUY ANGOSTO
========================================================= */

@media (max-width: 380px) {

  #screen-home .home-header-brand .brand-logo {
    width: 76px;
  }

  #screen-home .home-header-divider {
    display: none;
  }

  #screen-home .home-header-motto {
    max-width: 90px;
    font-size: 14px;
  }

  #screen-home .home-mobile-menu {
    right: 8px;
    width: calc(100vw - 16px);
  }
}

/* =========================================================
   45. EVIDENCIAS · PREVIEW DE ARCHIVOS
   Miniaturas compactas, apertura y eliminación
========================================================= */

/*
   IMPORTANTE:
   Estas son las clases reales que genera script.js:
   .evidence-preview-list
   .evidence-preview-item
   .evidence-preview-open
   .evidence-preview-media
   .evidence-preview-image
   .evidence-preview-name
   .evidence-preview-delete

   El preview debe servir para reconocer el archivo,
   no para mostrar la fotografía a tamaño grande.
*/


/* ---------------------------------------------------------
   CONTENEDOR DE MINIATURAS
--------------------------------------------------------- */

.evidence-preview-list {
  width: 100%;

  display: flex;
  flex-wrap: wrap;

  align-items: flex-start;

  gap: 10px;

  margin:
    4px
    0
    6px;
}


/* ---------------------------------------------------------
   CADA ARCHIVO
--------------------------------------------------------- */

.evidence-preview-item {
  position: relative;

  width: 96px;

  flex:
    0
    0
    96px;

  min-width: 0;

  overflow: hidden;

  background:
    var(--hyc-bg-surface);

  border:
    1px solid
    var(--hyc-border-subtle);

  border-radius:
    10px;

  box-shadow:
    var(--hyc-shadow-card);
}


/* ---------------------------------------------------------
   BOTÓN QUE ABRE EL ARCHIVO
--------------------------------------------------------- */

.evidence-preview-open {
  width: 100%;

  margin: 0;
  padding: 0;

  display: block;

  appearance: none;
  -webkit-appearance: none;

  overflow: hidden;

  background:
    var(--hyc-bg-surface);

  border: 0;

  color:
    var(--hyc-text-strong);

  font-family: inherit;

  text-align: left;

  cursor: pointer;
}


.evidence-preview-open:hover {
  background:
    var(--hyc-action-soft);
}


.evidence-preview-open:focus-visible {
  box-shadow:
    inset
    0
    0
    0
    3px
    rgba(90, 179, 154, 0.30);
}


/* ---------------------------------------------------------
   MINIATURA
--------------------------------------------------------- */

.evidence-preview-media {
  position: relative;

  width: 96px;
  height: 96px;

  display: flex;

  align-items: center;
  justify-content: center;

  overflow: hidden;

  background:
    #F1F4F3;
}


.evidence-preview-image {
  display: block !important;

  width: 96px !important;
  height: 96px !important;

  min-width: 96px;
  min-height: 96px;

  max-width: 96px !important;
  max-height: 96px !important;

  margin: 0 !important;

  object-fit: cover;
  object-position: center;

  border: 0;
  border-radius: 0;
}


/* ---------------------------------------------------------
   VIDEO / PDF / OTRO ARCHIVO
--------------------------------------------------------- */

.evidence-preview-file-icon {
  width: 46px;
  height: 46px;

  display: inline-flex;

  align-items: center;
  justify-content: center;

  color:
    var(--hyc-action);

  background:
    var(--hyc-bg-surface);

  border:
    1px solid
    var(--hyc-success-border);

  border-radius:
    50%;

  font-size: 14px;

  font-weight:
    var(--hyc-fw-semibold);

  line-height: 1;
}


/* ---------------------------------------------------------
   NOMBRE DEL ARCHIVO
   Compacto. Solo para identificarlo.
--------------------------------------------------------- */

.evidence-preview-name {
  width: 100%;

  padding:
    6px
    7px
    7px;

  display: block;

  overflow: hidden;

  color:
    var(--hyc-text-body);

  font-size: 11px;

  font-weight:
    var(--hyc-fw-regular);

  line-height: 1.3;

  text-overflow: ellipsis;
  white-space: nowrap;
}


/* ---------------------------------------------------------
   ELIMINAR
--------------------------------------------------------- */

.evidence-preview-delete {
  position: absolute;

  top: 5px;
  right: 5px;

  z-index: 3;

  width: 28px;
  height: 28px;

  min-width: 28px;
  min-height: 28px;

  padding: 0;

  display: inline-flex;

  align-items: center;
  justify-content: center;

  appearance: none;
  -webkit-appearance: none;

  color:
    #FFFFFF;

  background:
    rgba(32, 44, 59, 0.84);

  border:
    1px solid
    rgba(255, 255, 255, 0.48);

  border-radius:
    50%;

  box-shadow:
    0 2px 7px
    rgba(15, 16, 18, 0.20);

  font-family: inherit;

  font-size: 20px;
  font-weight: 400;

  line-height: 1;

  cursor: pointer;

  transition:
    background
    var(--hyc-duration)
    var(--hyc-ease),
    transform
    140ms
    ease;
}


.evidence-preview-delete:hover {
  background:
    var(--hyc-error-text);
}


.evidence-preview-delete:active {
  transform:
    scale(0.94);
}


.evidence-preview-delete:focus-visible {
  outline:
    3px solid
    rgba(150, 65, 47, 0.24);

  outline-offset:
    2px;
}


.evidence-preview-delete:disabled {
  opacity: 0.55;

  cursor:
    wait;
}


/* ---------------------------------------------------------
   TARJETA DE EVIDENCIAS
--------------------------------------------------------- */

.evidence-requirement-card {
  gap:
    14px;
}


.evidence-card-helper {
  margin-top:
    2px;

  color:
    var(--hyc-text-strong);

  font-size:
    16px;

  font-weight:
    var(--hyc-fw-regular);

  line-height:
    1.45;
}


/* =========================================================
   EVIDENCIAS · MÓVIL
========================================================= */

@media (max-width: 700px) {

  .evidence-preview-list {
    gap:
      8px;
  }


  .evidence-preview-item {
    width:
      82px;

    flex-basis:
      82px;
  }


  .evidence-preview-media {
    width:
      82px;

    height:
      82px;
  }


  .evidence-preview-image {
    width:
      82px !important;

    height:
      82px !important;

    min-width:
      82px;

    min-height:
      82px;

    max-width:
      82px !important;

    max-height:
      82px !important;
  }


  /*
     El botón conserva una zona táctil razonable
     sin tapar demasiado la fotografía.
  */
  .evidence-preview-delete {
    width:
      30px;

    height:
      30px;

    min-width:
      30px;

    min-height:
      30px;

    top:
      4px;

    right:
      4px;

    font-size:
      21px;
  }


  .evidence-preview-name {
    padding:
      5px
      6px
      6px;

    font-size:
      10px;
  }

}


/* =========================================================
   EVIDENCIAS · MÓVIL MUY ANGOSTO
========================================================= */

@media (max-width: 380px) {

  .evidence-preview-item {
    width:
      76px;

    flex-basis:
      76px;
  }


  .evidence-preview-media {
    width:
      76px;

    height:
      76px;
  }


  .evidence-preview-image {
    width:
      76px !important;

    height:
      76px !important;

    min-width:
      76px;

    min-height:
      76px;

    max-width:
      76px !important;

    max-height:
      76px !important;
  }

}

/* =========================================
   CARGA DE EVIDENCIAS
========================================= */

.evidence-upload-button.is-uploading {
  opacity: 0.55;
  cursor: wait;
  pointer-events: none;
}

.evidence-upload-progress {
  margin-top: 14px;
  padding: 14px 16px;

  display: flex;
  align-items: center;
  gap: 12px;

  background: #eef8f5;
  border: 1px solid #b9ddd2;
  border-radius: 12px;

  color: #285f53;
}

.evidence-upload-progress strong {
  display: block;
  font-size: 14px;
  line-height: 1.4;
}

.evidence-upload-progress small {
  display: block;
  margin-top: 3px;

  font-size: 12px;
  line-height: 1.4;

  color: #5f6f6a;
}

.evidence-upload-spinner {
  width: 20px;
  height: 20px;

  flex: 0 0 20px;

  border: 2px solid #b9ddd2;
  border-top-color: #346a5d;
  border-radius: 50%;

  animation: evidenceUploadSpin 0.8s linear infinite;
}

.evidence-upload-success {
  margin-top: 14px;
  padding: 12px 14px;

  background: #eef8f5;
  border-radius: 10px;

  color: #246b58;
  font-size: 13px;
  font-weight: 600;
}

@keyframes evidenceUploadSpin {

  to {
    transform: rotate(360deg);
  }

}

.button-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 8px;
  border: 2px solid rgba(255, 255, 255, 0.45);
  border-top-color: #ffffff;
  border-radius: 50%;
  vertical-align: -3px;
  animation: button-spinner-rotate 0.75s linear infinite;
}

@keyframes button-spinner-rotate {
  to {
    transform: rotate(360deg);
  }
}

.btn:disabled {
  cursor: wait;
}

/* =====================================================
   DIRECCIÓN DE ACTIVIDAD · GOOGLE PLACES
===================================================== */

.activity-address-autocomplete {
  width: 100%;
}

.activity-address-autocomplete gmp-place-autocomplete {
  display: block;
  width: 100%;
  max-width: 100%;
}


.activity-address-confirmation {
  margin-top: 10px;
  margin-bottom: 24px;
  padding: 18px 20px;
  background: #eef8f5;
  border: 1px solid rgba(52, 106, 93, 0.22);
  border-radius: 16px;
}


.activity-address-confirmation-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  color: #346a5d;
  font-size: 15px;
  font-weight: 700;
}


.activity-address-confirmation-grid {
  display: grid;
  gap: 10px;
}


.activity-address-confirmation-item {
  display: grid;
  grid-template-columns: minmax(130px, 0.8fr) minmax(0, 1.5fr);
  gap: 14px;
  align-items: start;
}


.activity-address-confirmation-item span {
  color: #737579;
  font-size: 13px;
  line-height: 1.4;
}


.activity-address-confirmation-item strong {
  color: #353638;
  font-size: 14px;
  line-height: 1.45;
  font-weight: 600;
}


@media (max-width: 640px) {

  .activity-address-confirmation-item {
    grid-template-columns: 1fr;
    gap: 2px;
  }

}