/* Més Salut: propuesta del design system aplicada a la home (es/index.html).
   Fase 1: cabecera, hero y tarjetas de tratamiento. Solo presentación. */

/* Foco visible */
a:focus-visible, .btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }

/* Botones: contorno por defecto (secundario), relleno para el principal */
#section-485380 .btn {
  padding: 14px 28px; white-space: nowrap; font-size: 16px; font-weight: 500; line-height: 1.2; border-width: 1.5px;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease; opacity: 1;
}
#section-485380 .btn:hover { background: var(--brand); color: var(--text-on-inverse); opacity: 1; }

/* Hero: texto a la izquierda y tres tarjetas en rejilla (la tercera, apaisada) */
#section-485380.widget-section { padding-top: var(--space-4); padding-bottom: var(--space-4); }
#section-485380 .widget-section-content-content { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); align-items: stretch; margin-left: 0; margin-right: 0; }
#section-485380 .widget-column, #section-485380 .widget-column-content { display: contents; }
#section-485380 #column-1206340 { display: block; width: 100%; max-width: none; flex: none; margin: 0; }
#section-485380 #column-1206340 .widget-column-content { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); }
#section-485380 #widget-2249322 h1 { font-size: clamp(23px, 7vw, 32px); line-height: 1.05; font-weight: 500; text-wrap: balance; }
#section-485380 #widget-2249323 p { font-size: 18px; line-height: 1.6; color: var(--text-muted); }
#section-485380 #widget-2249329 { display: none; }
#section-485380 .widget-type-card { display: flex; }
#section-485380 #widget-2249316, #section-485380 #widget-2249319, #section-485380 #widget-2249553 { min-width: 0; }
@media (min-width: 768px) {
  #section-485380 .widget-section-content-content { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #section-485380 #column-1206340 { grid-column: 1 / -1; }
  #section-485380 #widget-2249553 { grid-column: 1 / -1; }
  #section-485380 #widget-2249553 .card { flex-direction: row; }
  #section-485380 #widget-2249553 .card-image { flex: 0 0 42%; width: 42%; aspect-ratio: auto; }
  #section-485380 #widget-2249553 .card-content { justify-content: center; }
  #section-485380 #widget-2249329 { display: block; }
}
@media (min-width: 1024px) {
  #section-485380.widget-section { padding-top: var(--space-5); padding-bottom: var(--space-5); }
  #section-485380 .widget-section-content-content { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--space-3); }
  #section-485380 #column-1206340 { grid-column: 1 / 7; grid-row: 1 / 3; align-self: center; }
  #section-485380 #widget-2249316 { grid-column: 7 / 10; grid-row: 1; }
  #section-485380 #widget-2249319 { grid-column: 10 / 13; grid-row: 1; }
  #section-485380 #widget-2249553 { grid-column: 7 / 13; grid-row: 2; }
  #section-485380 #widget-2249322 h1 { font-size: clamp(29px, 2.85vw, 48px); }
}

/* Tarjetas del hero: texto debajo de la imagen, nunca sobre ella */
#section-485380 .widget-type-card .card { flex: 1 1 auto; position: static; display: flex; flex-direction: column; background: var(--surface-sand); border-radius: var(--radius-md); overflow: hidden; }
#section-485380 .widget-type-card .card-image, #section-485380 .widget-type-card .card-overlay { border-radius: 0; }
#section-485380 .widget-type-card .card-image { aspect-ratio: 16 / 10; }
#section-485380 .widget-type-card .card-content { position: static; padding: var(--space-3); gap: var(--space-1); }
#section-485380 .widget-type-card .card-title { font-size: 24px; line-height: 1.25; font-weight: 500; color: var(--text-primary); }
#section-485380 .widget-type-card .card-description, #section-485380 .widget-type-card .card-description p { margin-top: var(--space-1); font-size: 16px; line-height: 1.6; color: var(--text-muted) !important; }
#section-485380 .widget-type-card .card-description span { color: inherit !important; }

/* Resto de la home: secciones más compactas y radios unificados */
#home .widget-section.widget-section--fluid, #home .widget-section { padding-top: var(--space-4); padding-bottom: var(--space-4); }
#section-485380.widget-section { padding-top: var(--space-4); }
#section-485443 .widget-section-content { border-radius: var(--radius-md) !important; }
#section-485451.widget-section { padding-top: var(--space-4); padding-bottom: var(--space-2); }
@media (min-width: 1024px) { #home .widget-section { padding-top: var(--space-5); padding-bottom: var(--space-5); } #section-485451.widget-section { padding-top: var(--space-5); padding-bottom: var(--space-3); } }

/* Tarjetas de tratamiento: arena, sin borde, iguales */
#column-1206457, #column-1206479, #column-1206480, #column-1206481 { border: 0 !important; border-radius: var(--radius-md) !important; background: var(--surface-sand); display: flex; }
#column-1206457 .widget-column-content, #column-1206479 .widget-column-content, #column-1206480 .widget-column-content, #column-1206481 .widget-column-content { flex: 1 1 auto; align-content: stretch; }
#column-1206457 .widget-item, #column-1206479 .widget-item, #column-1206480 .widget-item, #column-1206481 .widget-item { display: flex; flex: 1 1 100%; }
#section-485421 .widget-type-card .card { flex: 1 1 auto; display: flex; flex-direction: column; border-radius: var(--radius-md); }
#section-485421 .widget-type-card .card-image, #section-485421 .widget-type-card .card-overlay { border-radius: 0 !important; aspect-ratio: 4 / 3; }
#section-485421 .widget-type-card .card-content { padding: var(--space-3); }
#section-485421 .widget-type-card .card-title { font-size: 24px; line-height: 1.25; font-weight: 500; }
#section-485421 .widget-type-card .card-description { margin-top: var(--space-1); font-size: 16px; line-height: 1.6; color: var(--text-muted); }

/* Tarjetas de tratamiento: enlace completo + respuesta al pasar el ratón */
.card-link { color: inherit; text-decoration: none; }
.card-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
#column-1206457, #column-1206479, #column-1206480, #column-1206481 { position: relative; transition: transform .2s ease, box-shadow .2s ease; }
#column-1206457:hover, #column-1206479:hover, #column-1206480:hover, #column-1206481:hover,
#column-1206457:focus-within, #column-1206479:focus-within, #column-1206480:focus-within, #column-1206481:focus-within { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
#column-1206457 .card-image img, #column-1206479 .card-image img, #column-1206480 .card-image img, #column-1206481 .card-image img { transition: transform .4s ease; }
#column-1206457:hover .card-image img, #column-1206479:hover .card-image img, #column-1206480:hover .card-image img, #column-1206481:hover .card-image img { transform: scale(1.05); }
.card-link:focus-visible { outline: none; }
.card-link:focus-visible::after { outline: 2px solid var(--brand); outline-offset: -2px; border-radius: var(--radius-md); }
@media (prefers-reduced-motion: reduce) {
  #column-1206457, #column-1206479, #column-1206480, #column-1206481, #column-1206457 .card-image img, #column-1206479 .card-image img, #column-1206480 .card-image img, #column-1206481 .card-image img { transition: none; transform: none !important; }
}