:root{--pizarra: #2c3a45; --pizarra2: #222d36; --coral: #ef6f5e; --menta: #d7ece5; --menta2: #eaf5f1; --claro: #f5f7f6; --texto: #4f5a62;}
*{box-sizing: border-box;}
html{scroll-behavior: smooth; text-size-adjust: 100%;}
body{margin: 0px; background: var(--claro); color: var(--texto); font-family: "Nunito Sans", -apple-system, "Segoe UI", sans-serif; font-size: 17.5px; line-height: 1.72; font-weight: 300; -webkit-font-smoothing: antialiased;}
a{color: inherit;}
svg{max-width: 100%;}
::selection{background: var(--coral); color: rgb(255, 255, 255);}
:focus-visible{outline: 2px solid var(--coral); outline-offset: 3px;}
.banda{max-width: 1120px; margin: 0px auto; padding: 0px 26px;}
h1, h2, h3{font-family: Sora, -apple-system, sans-serif; color: var(--pizarra); font-weight: 700; line-height: 1.16; letter-spacing: -0.02em; margin: 0px 0px 18px;}
h1{font-size: 48px; line-height: 1.14; max-width: 20ch;}
h2{font-size: 34px; max-width: 22ch;}
h3{font-size: 19px; margin-bottom: 9px;}
p{margin: 0px 0px 18px; max-width: 62ch;}
.pastilla{display: inline-block; margin-bottom: 18px; padding: 5px 14px; border-radius: 999px; background: rgba(239, 111, 94, 0.16); font-size: 13px; font-weight: 600; color: rgb(193, 75, 60);}
.pastilla.oscura{background: rgba(44, 58, 69, 0.1); color: var(--pizarra);}
.parrafo-guia{font-size: 20px; line-height: 1.62;}
.texto-intro{font-size: 18.5px; max-width: 62ch;}
.texto-intro.palido{color: rgba(245, 247, 246, 0.8);}
.cinta-alta{background: rgb(255, 255, 255); border-bottom: 1px solid rgba(44, 58, 69, 0.12);}
.cinta-fila{display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 16px; padding-bottom: 16px;}
.marca-c{display: flex; align-items: center; gap: 10px; text-decoration: none; font-family: Sora, sans-serif; font-size: 17.5px; font-weight: 700; letter-spacing: -0.02em; color: var(--pizarra);}
.marca-fig{width: 28px; height: 28px; flex: 0 0 auto;}
.tramos{display: flex; gap: 22px;}
.tramos a{font-size: 15px; text-decoration: none; color: var(--texto);}
.tramos a:hover{color: var(--coral);}
.inicio{background: rgb(255, 255, 255);}
.inicio-grid{display: grid; grid-template-columns: 1.3fr 0.7fr; gap: 48px; align-items: center; padding-top: 72px; padding-bottom: 70px;}
.botones-i{display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px;}
.boton-c{display: inline-block; padding: 13px 26px; border-radius: 8px; background: var(--pizarra); border: 1.5px solid var(--pizarra); color: rgb(255, 255, 255); font-family: Sora, sans-serif; font-size: 15px; font-weight: 500; text-decoration: none; cursor: pointer; transition: background 0.18s, color 0.18s;}
.boton-c:hover{background: var(--coral); border-color: var(--coral);}
.boton-c.hueco{background: none; color: var(--pizarra);}
.boton-c.hueco:hover{background: var(--pizarra); color: rgb(255, 255, 255);}
.boton-c.hueco.claro{color: var(--menta); border-color: rgba(215, 236, 229, 0.4);}
.boton-c.hueco.claro:hover{background: var(--menta); color: var(--pizarra);}
.reloj-caja{background: var(--menta2); border-radius: 14px; padding: 26px 24px;}
.reloj-rot{display: block; margin-bottom: 14px; font-family: Sora, sans-serif; font-size: 12.5px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--pizarra);}
.barra-dia{display: flex; height: 40px; border-radius: 6px; overflow: hidden;}
.segmento{display: flex; align-items: center; justify-content: center; font-size: 12px; color: rgb(255, 255, 255); white-space: nowrap; overflow: hidden;}
.segmento.sentado{background: var(--pizarra);}
.segmento.dormido{background: rgb(127, 149, 162);}
.segmento.activo{background: var(--coral); font-size: 0px;}
.reloj-nota{margin: 16px 0px 0px; font-size: 15.5px; line-height: 1.6;}
.bloque{padding: 84px 0px;}
.bloque-claro{background: rgb(251, 252, 252);}
.bloque-claro2{background: var(--menta2);}
.bloque-menta{background: var(--menta);}
.bloque-oscuro{background: var(--pizarra); color: rgba(245, 247, 246, 0.8);}
.bloque-oscuro h2, .bloque-oscuro h3{color: rgb(255, 255, 255);}
.trio{display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 40px;}
.ficha-c{background: rgb(255, 255, 255); border-radius: 12px; border: 1px solid rgba(44, 58, 69, 0.1); padding: 26px 24px;}
.ficha-c p{margin: 0px; font-size: 16.5px;}
.ficha-num{display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; margin-bottom: 14px; border-radius: 50%; background: var(--menta); font-family: Sora, sans-serif; font-size: 13px; color: var(--pizarra);}
.ejercicio{display: grid; grid-template-columns: 300px 1fr; gap: 46px; margin-top: 42px; align-items: center;}
.ejercicio-vista{position: relative;}
.ejercicio-vista svg{width: 100%; height: auto; display: block;}
.contador{position: absolute; top: 8px; left: 8px; font-family: Sora, sans-serif; font-size: 13px; color: rgba(245, 247, 246, 0.7);}
.ejercicio-texto h3{font-size: 26px; margin-bottom: 14px;}
.ejercicio-texto p{font-size: 17.5px; color: rgba(245, 247, 246, 0.85); max-width: 54ch;}
.ejercicio-tiempo{display: inline-block; margin-bottom: 22px; padding: 5px 14px; border: 1px solid rgba(215, 236, 229, 0.4); border-radius: 999px; font-family: Sora, sans-serif; font-size: 13px; color: var(--menta);}
.control-ejercicio{display: flex; flex-wrap: wrap; gap: 12px;}
.puntos-nav{display: flex; gap: 8px; margin-top: 22px;}
.punto{width: 10px; height: 10px; border-radius: 50%; background: rgba(215, 236, 229, 0.28);}
.punto.activo{background: var(--coral);}
.dos-lados{display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 46px; align-items: start;}
.tarjeta-lat{background: rgb(255, 255, 255); border-radius: 12px; border: 1px solid rgba(44, 58, 69, 0.1); padding: 28px 26px;}
.tarjeta-lat.resalte{background: var(--menta); border-color: rgba(44, 58, 69, 0.14);}
.tarjeta-rot-c{display: block; margin-bottom: 14px; font-family: Sora, sans-serif; font-size: 12.5px; font-weight: 500; letter-spacing: 0.09em; text-transform: uppercase; color: rgb(193, 75, 60);}
.lista-c{list-style: none; margin: 0px; padding: 0px;}
.lista-c li{position: relative; margin-bottom: 12px; padding-left: 26px; font-size: 16.5px; line-height: 1.6;}
.lista-c li::before{content: ""; position: absolute; left: 0px; top: 10px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--coral);}
.lista-num{margin: 0px; padding-left: 20px;}
.lista-num li{margin-bottom: 11px; font-size: 16.5px; line-height: 1.6;}
.lista-num li::marker{color: var(--coral); font-weight: 700;}
.tarjeta-nota{margin: 16px 0px 0px; font-size: 15px;}
.frase-bloque-c{background: var(--coral); padding: 58px 0px;}
.frase-c{margin: 0px; max-width: 27ch; font-family: Sora, sans-serif; font-size: 34px; font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; color: rgb(255, 255, 255);}
.plegable-c{margin-top: 34px; border-top: 1px solid rgba(44, 58, 69, 0.2);}
.plegable-c details{border-bottom: 1px solid rgba(44, 58, 69, 0.2);}
.plegable-c summary{position: relative; list-style: none; cursor: pointer; padding: 19px 44px 19px 0px; font-family: Sora, sans-serif; font-size: 18px; font-weight: 500; color: var(--pizarra);}
.plegable-c summary::-webkit-details-marker{display: none;}
.plegable-c summary::after{content: "+"; position: absolute; right: 6px; top: 16px; font-size: 22px; color: rgb(193, 75, 60);}
.plegable-c details[open] summary::after{content: "–";}
.plegable-c summary:hover{color: rgb(193, 75, 60);}
.plegable-c p{margin: 0px; padding-bottom: 22px; font-size: 17px;}
.pie-c{background: var(--pizarra2); color: rgba(245, 247, 246, 0.7); padding: 48px 0px 52px;}
.pie-c .marca-c{color: rgb(255, 255, 255);}
.pie-fila-c{display: flex; flex-wrap: wrap; gap: 32px; justify-content: space-between; align-items: flex-start;}
.pie-c p{margin: 16px 0px 0px; max-width: 48ch; font-size: 15px; line-height: 1.6;}
.pie-tramos{display: flex; flex-wrap: wrap; gap: 18px; max-width: 400px;}
.pie-tramos a{font-size: 15px; text-decoration: none; color: rgba(245, 247, 246, 0.7);}
.pie-tramos a:hover{color: var(--coral);}
.pie-linea-c{margin-top: 26px; font-size: 14px; opacity: 0.7;}
.pagina-c{max-width: 740px; padding-top: 60px; padding-bottom: 72px;}
.pagina-c h1{font-size: 36px; max-width: none;}
.pagina-c h2{font-size: 22px; margin-top: 32px; margin-bottom: 10px; max-width: none;}
.pagina-c ul{padding-left: 20px;}
.pagina-c li{margin-bottom: 10px; max-width: 62ch;}
.forma-c{margin-top: 28px; max-width: 520px;}
.forma-c label{display: block; margin-bottom: 6px; font-family: Sora, sans-serif; font-size: 12.5px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pizarra);}
.forma-c input, .forma-c textarea{width: 100%; margin-bottom: 20px; padding: 13px 14px; border: 1px solid rgba(44, 58, 69, 0.18); border-radius: 8px; background: rgb(255, 255, 255); color: var(--pizarra); font-family: "Nunito Sans", sans-serif; font-size: 16px;}
.forma-c textarea{min-height: 130px; resize: vertical;}
.forma-c input:focus, .forma-c textarea:focus{border-color: var(--coral); outline: none;}
.forma-c button{padding: 13px 30px; border: 0px; border-radius: 8px; background: var(--pizarra); color: rgb(255, 255, 255); font-family: Sora, sans-serif; font-size: 15px; font-weight: 500; cursor: pointer;}
@media (max-width: 1024px){h1{font-size: 38px;}
h2{font-size: 29px;}
.frase-c{font-size: 27px;}
.trio{grid-template-columns: 1fr;}
.ejercicio{grid-template-columns: 240px 1fr; gap: 32px;}}
@media (max-width: 880px){.inicio-grid{grid-template-columns: 1fr; gap: 34px; padding-top: 52px;}
.dos-lados{grid-template-columns: 1fr; gap: 32px;}
.ejercicio{grid-template-columns: 1fr;}
.ejercicio-vista{max-width: 260px;}}
@media (max-width: 700px){body{font-size: 16.5px;}
h1{font-size: 29px;}
h2{font-size: 24px;}
.parrafo-guia{font-size: 18px;}
.tramos{display: none;}
.bloque{padding: 54px 0px;}
.frase-c{font-size: 22px; max-width: none;}
.pagina-c h1{font-size: 27px;}}
@media (prefers-reduced-motion: reduce){html{scroll-behavior: auto;}
.boton-c{transition: none;}}