:root{
  --gap:16px;
  --card-min-h:220px;
  --nav-size:44px;
  --nav-radius:999px;
}

form{
  margin-top: 2em;
}

@media (max-width:767px){
	#bloque-ayuda-general{
		margin: 0 1em;
		padding-bottom: 5em;
	}
}

.carousel .nav[hidden] { display: none !important; }

.carousel{ width:100%; margin:auto; }
.rail{ display:grid; grid-template-columns: auto 1fr auto; align-items:center; column-gap:12px; }
.nav{ width:var(--nav-size); height:var(--nav-size); display:grid; place-items:center; border:0; border-radius:var(--nav-radius); background:#fafafa; font-size: 43px; line-height:1; cursor:pointer; }

.viewport{ outline:none; overflow:hidden; }

.track{ list-style:none; margin:0; display:grid; gap:var(--gap); padding:var(--gap) 0; will-change: transform; }
.track>li{ list-style:none; }

/* Ghosts , se usan para "rellenar" el carusel para evitar desplazamientos*/
.track .ghost{ visibility:hidden; pointer-events:none; }
.track .ghost .card{ visibility:hidden; pointer-events:none; }

.card{ display:flex; flex-direction:column; gap:7px; background:#fff; border:1px solid #e9e9ea; border-radius:3px; padding:0px; box-shadow:0 1px 2px rgba(0,0,0,.03); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; min-height: var(--card-min-h); text-decoration:none; color:inherit; }
.card:hover{ transform: translateY(-2px); box-shadow:0 6px 22px rgba(0,0,0,.08); border-color:#e2e2e3; }


.card .media{ display:block; border-radius:3px 3px 0 0; overflow:hidden; }
.card .media img{ width:100%; height:150px; object-fit:cover; display:block; background:#f2f2f2; }


.card h3{ font:Open sans,helvetica,Arial,sans-serif; margin-top:2px; padding:0 10px; }
.card p{ font:Open sans, helvetica, Arial,sans-serif; color:#232323; margin-bottom:4px; padding:0 10px;  font-size: 1.2em;  line-height: 1.281425em; }

/* Enlace "Ver más →" */
.card .more{
  margin:8px 10px 10px;
  align-self:flex-start;
  display:inline-flex;
  gap:6px;
  text-decoration:none;
  font-weight: 600;
  font-size: 14px;
  color:#08c;
}
.card .more::after{ content:"→" }
.card .more:hover{ text-decoration:underline; }
.card .more:focus-visible{ outline:3px solid rgb(86, 88, 87); outline-offset:2px; }


#carousel-hero .card{
  min-height: 312px;
}

#carousel-hero .card h3{
  line-height: 1;
  font-weight: 700;
  margin: 6px 0 0;
  padding: 0 10px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;

  font-size: 1.4em;
}
#carousel-hero .card p{
  line-height: 1.4;
  padding: 0 10px;
  margin: 4px 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;

}
#carousel-hero .card .more{
  margin-top: auto;
}

/* Paginación */
.pager{ display:flex; gap:8px; justify-content:center; align-items:center; padding:14px 0 0; }
.pager button{ width:70px; height:5px; border-radius:999px; border:0; background:#d6d6d6; cursor:pointer; }
.pager button[aria-current="true"]{ background:#d00; width:70px; border-radius:999px; }
.pager button:focus-visible{ outline:2px solid #222; outline-offset:2px; }

/* ===== MOBILE ===== */
@media (max-width:767px){
  .carousel .rail{ display:block !important; column-gap:0 !important; }
  .adaptive .rail{ display:block !important; column-gap:0 !important; }

  .carousel .nav{ display:none !important; }
  .carousel .viewport{ overflow-x:auto; -webkit-overflow-scrolling:touch; scroll-snap-type:x mandatory; scroll-behavior:smooth; scrollbar-width:none; -ms-overflow-style:none; }
  .carousel .viewport::-webkit-scrollbar{ display:none; width:0; height:0; }
  .carousel .track{ grid-auto-flow:column; grid-auto-columns:100%; }
  .carousel .card{ scroll-snap-align:center; }
}

/* ===== TABLET ===== */
@media (min-width:768px) and (max-width:1023px){
  .carousel .track{ grid-auto-flow:column; grid-auto-columns:calc((100% - var(--gap)) / 2); }
}

/* ===== DESKTOP ===== */
@media (min-width:1024px){
  .carousel .track{ grid-auto-flow:column; grid-auto-columns:calc((100% - (3 * var(--gap))) / 4); }
}

@media (max-width:767px){
  .adaptive .viewport{ overflow-x:auto; -webkit-overflow-scrolling:touch; scroll-snap-type:x mandatory; scroll-behavior:smooth; scrollbar-width:none; -ms-overflow-style:none; }
  .adaptive .viewport::-webkit-scrollbar{ display:none; width:0; height:0; }
  .adaptive .track{ grid-auto-flow:column; grid-auto-columns:100%; }
  .adaptive .card{ scroll-snap-align:center; }
  .adaptive .pager{ display:flex; }
}
@media (min-width:768px){
  .adaptive .rail{ grid-template-columns:1fr; }
  .adaptive .nav{ display:none !important; }
  .adaptive .viewport{ overflow:visible; }
  .adaptive .track{ transform:none !important; grid-auto-flow:row; grid-template-columns:repeat(4,1fr); grid-auto-rows:1fr; }
  .adaptive .pager{ display:none; }
}
@media (min-width:768px){
  .adaptive .rail{ grid-template-columns:1fr; }
  .adaptive .nav{ display:none !important; }
  .adaptive .viewport{ overflow:visible; }
  .adaptive .track{
    transform:none !important;
    grid-auto-flow:row;
    grid-template-columns:repeat(3,1fr);
    grid-auto-rows:1fr;
  }
  .adaptive .pager{ display:none; }
}
@media (min-width:1024px){
  .adaptive .track{ grid-template-columns:repeat(4,1fr); }
}
/* ===================== FEATURES ===================== */
.features{ margin-top:40px; }

.features .flex{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; gap:var(--gap);
}
.features .flex>li{ width:100%; }
@media (min-width:768px){
  .features .flex{ justify-content:flex-start; }
  .features .flex>li{ flex:0 1 calc((100% - (2 * var(--gap))) / 3); }
  .features .flex>li:last-child:nth-child(3n+1){ margin-left:auto; margin-right:auto; }
  .features .flex>li:nth-last-child(2):nth-child(3n+1){ margin-left:auto; }
  .features .flex>li:last-child:nth-child(3n+2){ margin-right:auto; }
}

.plain{
  display:flex; flex-direction:column;
  align-items:center;
  gap:10px; text-decoration:none; color:inherit;
  padding:12px; border-radius:12px; background:transparent;
  text-align:center;
}
.plain img{
  width:96px; height:96px;
  object-fit:cover; border-radius:50%;
  display:block;
  flex:0 0 auto;
}
.plain .copy{ display:flex; flex-direction:column; gap:4px; padding-top: 20px; }
.plain .title{ display:block; font:Open sans, helvetica, Arial,sans-serif; color: #000; font-size: 1.5em; font-weight: bold;}
.plain .desc{ display:block; font:Open sans, helvetica, Arial,sans-serif; font-size: 1.3em; color: #232323; }

@media (max-width:767px){
  .features .plain{
    flex-direction:row; align-items:center; gap:12px;
    padding:10px 0; text-align:left;
  }
  .features .plain img{
    width:64px; height:64px; border-radius:50%;
  }
  .features .plain .copy{ flex:1 1 auto; min-width:0; }
}

/* ======grid adaptable ====== */
#grid-adaptable .card{
  padding:12px 12px 10px;
  gap:8px;
  min-height:auto;
}
#grid-adaptable .card .header{
  display:flex;
  align-items:center;
  gap:10px;
  margin:2px 0 2px;
}
#grid-adaptable .card .icon{
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  border-radius:6px;
  background:#f5f7ff;
  font-size:18px;
  flex:0 0 28px;
}
#grid-adaptable .card .icon img{
  width:100%; height:100%; object-fit:contain; display:block;
}
#grid-adaptable .card h3,
#grid-adaptable .card .title{
  padding:0 !important;
  margin:0;
  font: Barlow,Open sans, Helvetica, Arial, sans-serif;
  color: #000;;
}

#grid-adaptable .card .bullets{
  margin:2px 0 0;
  padding-left:20px;
  list-style-type: disc;
  font-family: 'Open Sans', Arial, Helvetica, sans-serif;
  font-size: 10pt;
}
#grid-adaptable .card .bullets li{ margin:8px 0; }
#grid-adaptable .card .bullets li::marker{ color:#08c; }
#grid-adaptable .card .bullets a{
  color:#08c;
  text-decoration:none;
  font-family: 'Open Sans', Arial, Helvetica, sans-serif
}
#grid-adaptable .card .bullets a:hover{ text-decoration:underline; }

#grid-adaptable .card .more{
  margin:6px 0 4px;
  align-self:flex-start;
  display:inline-flex;
  gap:6px;
  color:#08c;
  text-decoration:none;
  font-weight:600;
}
#grid-adaptable .card .more::after{ content:"→"; }
#grid-adaptable .card .more:hover{ text-decoration:underline; }
#grid-adaptable .card .more:focus-visible{ outline:3px solid #2a7; outline-offset:2px; }