.marea-badge-row { margin: .7rem 0 0; } .marea-badge { display: inline-flex; align-items: center; gap: .45rem; padding: .38rem .85rem; border-radius: 999px; background: var(--brand-soft); border: 1px solid var(--brand-tint); color: var(--brand-deep); font-size: .82rem; font-weight: 700; text-decoration: none; } .marea-badge:hover { background: var(--brand-tint); } .marea-badge .ico { width: 16px; height: 16px; } .marea-estado { margin: 0 0 1.1rem; padding: 1rem 1.2rem; background: linear-gradient(160deg, var(--brand-softer), var(--brand-soft)); border: 1px solid var(--brand-tint); border-radius: var(--r-lg); } .marea-estado__hero { display: flex; align-items: center; gap: .9rem; } .marea-estado__flecha { flex: 0 0 auto; width: 2.4rem; height: 2.4rem; border-radius: 50%; display: none; align-items: center; justify-content: center; font-size: 1.2rem; font-weight: 800; color: #fff; background: var(--brand); } .marea-estado.is-subiendo .marea-estado__flecha { display: inline-flex; } .marea-estado.is-subiendo .marea-estado__flecha::before { content: "↑"; } .marea-estado.is-bajando .marea-estado__flecha { display: inline-flex; background: #0a98ac; } .marea-estado.is-bajando .marea-estado__flecha::before { content: "↓"; } .marea-estado__txt { flex: 1 1 auto; min-width: 0; } .marea-estado__prox { margin: 0; font-family: var(--f-display); font-size: 1.15rem; line-height: 1.35; color: var(--ink); } .marea-estado__prox strong { font-weight: 800; } .marea-estado__resta { color: var(--brand-deep); font-weight: 700; } .marea-estado__sub { margin: .15rem 0 0; font-size: .88rem; color: var(--ink-2); } .marea-estado__coef { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; min-width: 3.6rem; padding: .4rem .6rem; border-radius: var(--r-md); background: var(--color-bg); border: 1px solid var(--line); } .marea-estado__coef b { font-family: var(--f-display); font-size: 1.35rem; font-weight: 800; color: var(--brand-deep); line-height: 1.1; } .marea-estado__coef span { font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); text-align: center; } .marea-estado__eventos { margin-top: .85rem; } .marea-estado--mini { margin: 0 0 .8rem; padding: .6rem .8rem; } .marea-estado--mini .marea-estado__flecha { width: 1.8rem; height: 1.8rem; font-size: .95rem; } .marea-estado--mini .marea-estado__prox { font-size: .98rem; } .marea-estado--mini .marea-estado__coef b { font-size: 1.1rem; } @media (max-width: 560px) { .marea-estado__hero { flex-wrap: wrap; } .marea-estado__prox { font-size: 1.02rem; } } .marea-curva { margin: 0 0 1.2rem; } .marea-curva__svg { display: block; width: 100%; height: auto; } .marea-curva__area { fill: var(--brand-soft); stroke: none; } .marea-curva__linea { fill: none; stroke: var(--brand); stroke-width: 2.5; stroke-linecap: round; } .marea-curva__ev circle { fill: var(--brand-deep); stroke: #fff; stroke-width: 1.5; } .marea-curva__ev.is-baja circle { fill: #0a98ac; } .marea-curva__ev text { font-family: var(--f-display); font-size: 13px; font-weight: 700; fill: var(--ink-2); } .marea-curva__ahora { fill: #e8590c; stroke: #fff; stroke-width: 1.5; } .marea-curva__ahora-linea { stroke: #e8590c; stroke-width: 1; stroke-dasharray: 3 3; opacity: .7; } .marea-curva__eje { display: flex; justify-content: space-between; margin-top: .15rem; font-size: .68rem; font-weight: 700; color: var(--muted-2); font-variant-numeric: tabular-nums; } .msem .marea-curva { margin-bottom: .9rem; } .marea-curva__svg, .marea-mini { --marea-noche: rgba(13, 42, 80, .09); } .marea-curva__noche, .marea-mini__noche { fill: var(--marea-noche); } .marea-curva__astro-fila { position: relative; height: 1.05rem; margin-top: .2rem; font-size: .68rem; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; } .marea-curva__tick { position: absolute; top: 0; transform: translateX(-50%); display: inline-flex; align-items: center; gap: .22rem; white-space: nowrap; } .marea-curva__tick .ico--tick { width: 13px; height: 13px; } .marea-curva__tick--sol .ico--tick { color: var(--sun, #e8a13a); } .marea-curva__tick--luna .ico--tick { color: var(--brand-deep, #084d84); } .marea-astro { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: .4rem; } .marea-astro__card { background: var(--color-bg); border: 1px solid var(--line); border-radius: var(--r-lg); padding: .9rem 1.05rem; box-shadow: 0 1px 3px rgba(10, 40, 80, .05); } .marea-astro__card h3 { display: flex; align-items: center; gap: .45rem; margin: 0 0 .5rem; font-family: var(--f-display); font-size: .95rem; font-weight: 700; color: var(--ink); } .marea-astro__card h3 .ico { width: 18px; height: 18px; color: var(--brand); } .marea-astro__emoji { font-size: 1.05rem; line-height: 1; } .marea-astro__filas p { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; margin: 0 0 .3rem; font-size: .88rem; color: var(--ink-2); } .marea-astro__filas p:last-child { margin-bottom: 0; } .marea-astro__filas b { color: var(--ink); font-variant-numeric: tabular-nums; } .ico--sm { width: 15px; height: 15px; color: var(--muted); } .marea-astro__rating { letter-spacing: .12em; font-size: .8rem; color: var(--line); } .marea-astro__rating .is-on { color: var(--brand); } .marea-astro__rating--sm { font-size: .65rem; } @media (max-width: 900px) { .marea-astro { grid-template-columns: 1fr; } } .msem__tabla--full { min-width: 680px; } .msem__coeflbl { display: block; font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); } .msem__sol { white-space: nowrap; font-variant-numeric: tabular-nums; } .mcal__evs { display: flex; flex-wrap: wrap; gap: .1rem .9rem; } .mcal__ev { white-space: nowrap; font-variant-numeric: tabular-nums; } .mcal__ev b { font-weight: 800; color: var(--ink); } .mcal__ev span:last-child { color: var(--muted); font-size: .82em; } .mcal__tabla td, .mcal__tabla th { padding: .42rem .55rem; } .marea-playas { list-style: none; margin: .4rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: .35rem 1.6rem; } .marea-playas li { padding: .3rem 0; border-bottom: 1px solid var(--line-2); font-size: .92rem; } .marea-playas a { font-weight: 700; color: var(--brand); text-decoration: none; } .marea-playas a:hover { text-decoration: underline; } .marea-playas__meta { display: block; font-size: .78rem; color: var(--muted); } @media (max-width: 700px) { .marea-playas { grid-template-columns: 1fr; } } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }