/* ============================================================================ ArcaHost — Webfonts Geist Sans + Geist Mono. En la app real se cargan con next/font (Google Fonts). Aquí las traemos de Google Fonts para que las tarjetas y mocks rendericen con la tipografía genuina. Geist es open-source (SIL OFL) de Vercel — NO es un sustituto: es la fuente real del producto. ========================================================================== */ /* cyrillic-ext */ @font-face { font-family: 'Geist'; font-style: normal; font-weight: 300; font-display: swap; src: url("assets/7deff0c9-f9b9-4c96-8f04-50e7f3e98322.woff2") format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } /* cyrillic */ @font-face { font-family: 'Geist'; font-style: normal; font-weight: 300; font-display: swap; src: url("assets/d8a84bdf-1acc-4d5f-bf03-e7dab1579bfa.woff2") format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* vietnamese */ @font-face { font-family: 'Geist'; font-style: normal; font-weight: 300; font-display: swap; src: url("assets/26899bf1-475c-470c-a7b6-e9484879b77f.woff2") format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } /* latin-ext */ @font-face { font-family: 'Geist'; font-style: normal; font-weight: 300; font-display: swap; src: url("assets/aaa4b97a-c6b4-4ddb-ae96-ddc8df45a728.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Geist'; font-style: normal; font-weight: 300; font-display: swap; src: url("assets/17776917-8a9d-4067-b565-dda05d4237e8.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* cyrillic-ext */ @font-face { font-family: 'Geist'; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/7deff0c9-f9b9-4c96-8f04-50e7f3e98322.woff2") format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } /* cyrillic */ @font-face { font-family: 'Geist'; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/d8a84bdf-1acc-4d5f-bf03-e7dab1579bfa.woff2") format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* vietnamese */ @font-face { font-family: 'Geist'; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/26899bf1-475c-470c-a7b6-e9484879b77f.woff2") format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } /* latin-ext */ @font-face { font-family: 'Geist'; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/aaa4b97a-c6b4-4ddb-ae96-ddc8df45a728.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Geist'; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/17776917-8a9d-4067-b565-dda05d4237e8.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* cyrillic-ext */ @font-face { font-family: 'Geist'; font-style: normal; font-weight: 500; font-display: swap; src: url("assets/7deff0c9-f9b9-4c96-8f04-50e7f3e98322.woff2") format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } /* cyrillic */ @font-face { font-family: 'Geist'; font-style: normal; font-weight: 500; font-display: swap; src: url("assets/d8a84bdf-1acc-4d5f-bf03-e7dab1579bfa.woff2") format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* vietnamese */ @font-face { font-family: 'Geist'; font-style: normal; font-weight: 500; font-display: swap; src: url("assets/26899bf1-475c-470c-a7b6-e9484879b77f.woff2") format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } /* latin-ext */ @font-face { font-family: 'Geist'; font-style: normal; font-weight: 500; font-display: swap; src: url("assets/aaa4b97a-c6b4-4ddb-ae96-ddc8df45a728.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Geist'; font-style: normal; font-weight: 500; font-display: swap; src: url("assets/17776917-8a9d-4067-b565-dda05d4237e8.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* cyrillic-ext */ @font-face { font-family: 'Geist'; font-style: normal; font-weight: 600; font-display: swap; src: url("assets/7deff0c9-f9b9-4c96-8f04-50e7f3e98322.woff2") format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } /* cyrillic */ @font-face { font-family: 'Geist'; font-style: normal; font-weight: 600; font-display: swap; src: url("assets/d8a84bdf-1acc-4d5f-bf03-e7dab1579bfa.woff2") format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* vietnamese */ @font-face { font-family: 'Geist'; font-style: normal; font-weight: 600; font-display: swap; src: url("assets/26899bf1-475c-470c-a7b6-e9484879b77f.woff2") format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } /* latin-ext */ @font-face { font-family: 'Geist'; font-style: normal; font-weight: 600; font-display: swap; src: url("assets/aaa4b97a-c6b4-4ddb-ae96-ddc8df45a728.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Geist'; font-style: normal; font-weight: 600; font-display: swap; src: url("assets/17776917-8a9d-4067-b565-dda05d4237e8.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* cyrillic-ext */ @font-face { font-family: 'Geist'; font-style: normal; font-weight: 700; font-display: swap; src: url("assets/7deff0c9-f9b9-4c96-8f04-50e7f3e98322.woff2") format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } /* cyrillic */ @font-face { font-family: 'Geist'; font-style: normal; font-weight: 700; font-display: swap; src: url("assets/d8a84bdf-1acc-4d5f-bf03-e7dab1579bfa.woff2") format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* vietnamese */ @font-face { font-family: 'Geist'; font-style: normal; font-weight: 700; font-display: swap; src: url("assets/26899bf1-475c-470c-a7b6-e9484879b77f.woff2") format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } /* latin-ext */ @font-face { font-family: 'Geist'; font-style: normal; font-weight: 700; font-display: swap; src: url("assets/aaa4b97a-c6b4-4ddb-ae96-ddc8df45a728.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Geist'; font-style: normal; font-weight: 700; font-display: swap; src: url("assets/17776917-8a9d-4067-b565-dda05d4237e8.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* cyrillic-ext */ @font-face { font-family: 'Geist'; font-style: normal; font-weight: 800; font-display: swap; src: url("assets/7deff0c9-f9b9-4c96-8f04-50e7f3e98322.woff2") format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } /* cyrillic */ @font-face { font-family: 'Geist'; font-style: normal; font-weight: 800; font-display: swap; src: url("assets/d8a84bdf-1acc-4d5f-bf03-e7dab1579bfa.woff2") format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* vietnamese */ @font-face { font-family: 'Geist'; font-style: normal; font-weight: 800; font-display: swap; src: url("assets/26899bf1-475c-470c-a7b6-e9484879b77f.woff2") format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } /* latin-ext */ @font-face { font-family: 'Geist'; font-style: normal; font-weight: 800; font-display: swap; src: url("assets/aaa4b97a-c6b4-4ddb-ae96-ddc8df45a728.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Geist'; font-style: normal; font-weight: 800; font-display: swap; src: url("assets/17776917-8a9d-4067-b565-dda05d4237e8.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* cyrillic-ext */ @font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/966913ef-0d9e-45be-88a7-8e4d838e7c1b.woff2") format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } /* cyrillic */ @font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/df6867a3-5706-4ce5-af81-f98b7a910871.woff2") format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* symbols2 */ @font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/0acf5d3a-c3e8-4a46-afb2-adaba5e696fb.woff2") format('woff2'); unicode-range: U+2000-2001, U+2004-2008, U+200A, U+23B8-23BD, U+2500-259F; } /* vietnamese */ @font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/8fde8afc-40bb-4142-933d-168d6531441a.woff2") format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } /* latin-ext */ @font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/542199b9-bb75-435a-8210-1db8f1ecce90.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/6ae7f78a-beef-44a3-8ac1-be7b08c2bb3f.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* cyrillic-ext */ @font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url("assets/966913ef-0d9e-45be-88a7-8e4d838e7c1b.woff2") format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } /* cyrillic */ @font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url("assets/df6867a3-5706-4ce5-af81-f98b7a910871.woff2") format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* symbols2 */ @font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url("assets/0acf5d3a-c3e8-4a46-afb2-adaba5e696fb.woff2") format('woff2'); unicode-range: U+2000-2001, U+2004-2008, U+200A, U+23B8-23BD, U+2500-259F; } /* vietnamese */ @font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url("assets/8fde8afc-40bb-4142-933d-168d6531441a.woff2") format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } /* latin-ext */ @font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url("assets/542199b9-bb75-435a-8210-1db8f1ecce90.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url("assets/6ae7f78a-beef-44a3-8ac1-be7b08c2bb3f.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* cyrillic-ext */ @font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url("assets/966913ef-0d9e-45be-88a7-8e4d838e7c1b.woff2") format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } /* cyrillic */ @font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url("assets/df6867a3-5706-4ce5-af81-f98b7a910871.woff2") format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* symbols2 */ @font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url("assets/0acf5d3a-c3e8-4a46-afb2-adaba5e696fb.woff2") format('woff2'); unicode-range: U+2000-2001, U+2004-2008, U+200A, U+23B8-23BD, U+2500-259F; } /* vietnamese */ @font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url("assets/8fde8afc-40bb-4142-933d-168d6531441a.woff2") format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } /* latin-ext */ @font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url("assets/542199b9-bb75-435a-8210-1db8f1ecce90.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url("assets/6ae7f78a-beef-44a3-8ac1-be7b08c2bb3f.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ============================================================================ ArcaHost — Color tokens Transcribed 1:1 from apps/web/src/app/globals.css (light theme = source of truth). Color space: OKLCH. Primary hue 55° = NARANJA-ÁMBAR (warm amber), NOT teal — the original code comment mislabels it; the rendered color is amber. ========================================================================== */ :root { /* ── Re-theming knobs (the 3 values a hotel can override) ───────────────── */ --color-primary-raw: 0.45 0.10 255; /* slate indigo — panel admin */ --color-sidebar-raw: 0.15 0.02 60; /* gris muy oscuro cálido (sin cambios) */ --color-accent-raw: 0.60 0.10 255; /* indigo claro */ --color-brand-raw: 0.55 0.15 55; /* ámbar de marca — usar en superficie pública */ /* ── Surfaces & text ────────────────────────────────────────────────────── */ --background: oklch(0.985 0.002 80); /* lienzo cálido casi blanco */ --foreground: oklch(0.18 0.02 60); /* texto principal, gris cálido */ --card: oklch(1 0 0); /* superficie de tarjeta */ --card-foreground: oklch(0.18 0.02 60); --popover: oklch(1 0 0); --popover-foreground: oklch(0.18 0.02 60); /* ── Brand ──────────────────────────────────────────────────────────────── */ --primary: oklch(var(--color-primary-raw)); --primary-foreground: oklch(1 0 0); --accent: oklch(var(--color-accent-raw)); --accent-foreground: oklch(0.18 0.02 60); /* ── Neutrals ───────────────────────────────────────────────────────────── */ --secondary: oklch(0.96 0.01 80); --secondary-foreground: oklch(0.25 0.02 60); --muted: oklch(0.94 0.01 80); --muted-foreground: oklch(0.45 0.02 60); --border: oklch(0.90 0.02 80); --input: oklch(0.92 0.01 80); --ring: oklch(var(--color-primary-raw)); /* ── Semantic: destructivo ──────────────────────────────────────────────── */ --destructive: oklch(0.55 0.22 25); /* rojo */ --destructive-foreground: oklch(1 0 0); /* ── Gráficos (recharts) ────────────────────────────────────────────────── */ --chart-1: oklch(0.55 0.15 55); --chart-2: oklch(0.65 0.12 55); --chart-3: oklch(0.50 0.10 180); --chart-4: oklch(0.70 0.14 85); --chart-5: oklch(0.60 0.18 25); /* ── Sidebar (oscuro, siempre) ──────────────────────────────────────────── */ --sidebar: oklch(var(--color-sidebar-raw)); --sidebar-foreground: oklch(0.95 0.01 80); --sidebar-primary: oklch(var(--color-primary-raw)); --sidebar-primary-foreground: oklch(1 0 0); --sidebar-accent: oklch(0.25 0.02 60); --sidebar-accent-foreground: oklch(0.95 0.01 80); --sidebar-border: oklch(0.25 0.02 60); --sidebar-ring: oklch(var(--color-primary-raw)); } /* ── Tema oscuro (.dark) ──────────────────────────────────────────────────── */ .dark { --background: oklch(0.12 0.02 60); --foreground: oklch(0.95 0.01 80); --card: oklch(0.16 0.02 60); --card-foreground: oklch(0.95 0.01 80); --popover: oklch(0.16 0.02 60); --popover-foreground: oklch(0.95 0.01 80); --primary: oklch(0.62 0.12 255); --primary-foreground: oklch(0.12 0.02 60); --secondary: oklch(0.22 0.02 60); --secondary-foreground: oklch(0.95 0.01 80); --muted: oklch(0.22 0.02 60); --muted-foreground: oklch(0.65 0.02 80); --accent: oklch(0.55 0.10 255); --accent-foreground: oklch(0.95 0.01 80); --destructive: oklch(0.50 0.20 25); --destructive-foreground: oklch(0.95 0.01 80); --border: oklch(0.25 0.02 60); --input: oklch(0.22 0.02 60); --ring: oklch(0.60 0.10 255); --chart-1: oklch(0.62 0.12 255); --chart-2: oklch(0.55 0.15 55); --chart-3: oklch(0.60 0.10 180); --chart-4: oklch(0.65 0.14 85); --chart-5: oklch(0.55 0.18 25); --sidebar: oklch(0.10 0.02 60); --sidebar-foreground: oklch(0.95 0.01 80); --sidebar-primary: oklch(0.60 0.12 255); --sidebar-primary-foreground: oklch(1 0 0); --sidebar-accent: oklch(0.20 0.02 60); --sidebar-accent-foreground: oklch(0.95 0.01 80); --sidebar-border: oklch(0.22 0.02 60); --sidebar-ring: oklch(0.60 0.12 255); } /* ============================================================================ ArcaHost — Tipografía Fonts: Geist Sans (UI) + Geist Mono (datos/código), cargadas en layout.tsx vía next/font (Google Fonts). Tailwind las expone como --font-sans/--font-mono. Card titles usan font-heading (= Geist Sans, peso medio). ========================================================================== */ :root { /* ── Familias ───────────────────────────────────────────────────────────── */ --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-mono: "Geist Mono", ui-monospace, "SF Mono", "Cascadia Code", "Roboto Mono", Menlo, Consolas, monospace; --font-heading: var(--font-sans); /* ── Escala de tamaños (Tailwind text-* usados en la app) ───────────────── */ --text-2xs: 0.625rem; /* 10px — etiquetas micro: rol sidebar, "by ArcaHost" */ --text-xs: 0.75rem; /* 12px — meta, badges, leyendas */ --text-sm: 0.875rem; /* 14px — texto base de la UI (densidad alta) */ --text-base: 1rem; /* 16px — cuerpo en vistas públicas */ --text-lg: 1.125rem; /* 18px — títulos de card de paso */ --text-xl: 1.25rem; /* 20px — precios, CardTitle login */ --text-2xl: 1.5rem; /* 24px — bienvenida, encabezados de página */ /* ── Pesos ──────────────────────────────────────────────────────────────── */ --weight-normal: 400; --weight-medium: 500; /* peso por defecto de botones / nav / títulos card */ --weight-semibold: 600; /* nombres de hotel, totales, headings */ --weight-bold: 700; /* precios, KPIs, número del día en calendario */ /* ── Interlineado ───────────────────────────────────────────────────────── */ --leading-none: 1; --leading-tight: 1.15; --leading-snug: 1.3; /* CardTitle */ --leading-normal: 1.5; --leading-relaxed: 1.6; /* cuerpo de emails / prosa */ /* ── Tracking ───────────────────────────────────────────────────────────── */ --tracking-wider: 0.05em; /* labels uppercase: rol, secciones de sidebar */ } /* ============================================================================ ArcaHost — Espaciado, radios, sombras, layout Tailwind v4 default spacing scale (0.25rem step). Radio base --radius:0.5rem, con derivados sm/md/lg/xl como en @theme inline de globals.css. ========================================================================== */ :root { /* ── Radio (shadcn) ─────────────────────────────────────────────────────── */ --radius: 0.5rem; /* base */ --radius-sm: calc(var(--radius) - 4px); /* 4px */ --radius-md: calc(var(--radius) - 2px); /* 6px */ --radius-lg: var(--radius); /* 8px — botones (rounded-lg) */ --radius-xl: calc(var(--radius) + 4px); /* 12px — cards (rounded-xl) */ --radius-pill: 9999px; /* badges (rounded-4xl ≈ pill) */ /* ── Escala de espaciado (subset usado en la app) ───────────────────────── */ --space-0_5: 0.125rem; /* 2px */ --space-1: 0.25rem; /* 4px */ --space-1_5: 0.375rem; /* 6px */ --space-2: 0.5rem; /* 8px */ --space-2_5: 0.625rem; /* 10px */ --space-3: 0.75rem; /* 12px — padding interno de nav / card sm */ --space-4: 1rem; /* 16px — padding de card / gap por defecto */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px — padding de main (desktop) */ --space-8: 2rem; /* 32px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ /* ── Medidas de layout fijas (de la app real) ───────────────────────────── */ --sidebar-width: 16rem; /* w-64 */ --header-height: 4rem; /* h-16 */ --content-max: 42rem; /* max-w-2xl — vista pública de reservas */ --button-height: 2rem; /* h-8 — botón default (UI densa) */ --badge-height: 1.25rem; /* h-5 */ /* ── Sombras ────────────────────────────────────────────────────────────── */ --shadow-xs: 0 1px 2px 0 oklch(0 0 0 / 0.05); --shadow-sm: 0 1px 3px 0 oklch(0 0 0 / 0.08), 0 1px 2px -1px oklch(0 0 0 / 0.08); --shadow-md: 0 4px 6px -1px oklch(0 0 0 / 0.08), 0 2px 4px -2px oklch(0 0 0 / 0.06); --shadow-2xl: 0 25px 50px -12px oklch(0 0 0 / 0.25); /* card del login */ /* Las cards NO usan box-shadow por defecto: usan ring-1 ring-foreground/10. Este token reproduce ese halo de 1px. */ --ring-card: 0 0 0 1px oklch(0.18 0.02 60 / 0.10); } /* ============================================================================ ArcaHost — Estados de reserva (semántica de negocio) Fuente: components/reservations/reservation-calendar.tsx → DEFAULT_COLORS. Estos colores pintan las barras del calendario Gantt, los badges de estado y las leyendas. Cada propiedad puede sobre-escribirlos vía calendarColors (JSON). Los valores nativos son HEX (así viven en el código), expuestos aquí como tokens. ========================================================================== */ :root { --status-reserved: #06b6d4; /* Reservada — cian */ --status-partial: #f59e0b; /* Abono parcial — ámbar */ --status-paid: #22c55e; /* Pagada — verde */ --status-confirmed: #3b82f6; /* Confirmada — azul */ --status-checked-in: #16a34a; /* En casa — verde oscuro */ --status-checked-out: #a16207; /* Check-out — ámbar oscuro */ --status-no-show: #ef4444; /* No Show — rojo */ --status-cancelled: #9ca3af; /* Cancelada — gris */ --status-pending: #a855f7; /* Pendiente — púrpura */ /* Indicador de consumos pendientes de cobro (punto naranja) */ --status-pending-charges: #fdba74; /* orange-300 */ /* Origen de reserva online (badge "Online" en la lista) */ --source-online: #3b82f6; /* azul (icono Globe) */ } /* ============================================================================ ArcaHost Design System — entry point Consumers link ONLY this file. It is a list of @import lines (no rules here). Order: fonts → tokens. Everything reachable from here ships to consumers. ========================================================================== */ /* ============================================================================ ArcaHost — Webfonts Geist Sans + Geist Mono. En la app real se cargan con next/font (Google Fonts). Aquí las traemos de Google Fonts para que las tarjetas y mocks rendericen con la tipografía genuina. Geist es open-source (SIL OFL) de Vercel — NO es un sustituto: es la fuente real del producto. ========================================================================== */ /* cyrillic-ext */ @font-face { font-family: 'Geist'; font-style: normal; font-weight: 300; font-display: swap; src: url("assets/7deff0c9-f9b9-4c96-8f04-50e7f3e98322.woff2") format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } /* cyrillic */ @font-face { font-family: 'Geist'; font-style: normal; font-weight: 300; font-display: swap; src: url("assets/d8a84bdf-1acc-4d5f-bf03-e7dab1579bfa.woff2") format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* vietnamese */ @font-face { font-family: 'Geist'; font-style: normal; font-weight: 300; font-display: swap; src: url("assets/26899bf1-475c-470c-a7b6-e9484879b77f.woff2") format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } /* latin-ext */ @font-face { font-family: 'Geist'; font-style: normal; font-weight: 300; font-display: swap; src: url("assets/aaa4b97a-c6b4-4ddb-ae96-ddc8df45a728.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Geist'; font-style: normal; font-weight: 300; font-display: swap; src: url("assets/17776917-8a9d-4067-b565-dda05d4237e8.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* cyrillic-ext */ @font-face { font-family: 'Geist'; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/7deff0c9-f9b9-4c96-8f04-50e7f3e98322.woff2") format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } /* cyrillic */ @font-face { font-family: 'Geist'; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/d8a84bdf-1acc-4d5f-bf03-e7dab1579bfa.woff2") format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* vietnamese */ @font-face { font-family: 'Geist'; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/26899bf1-475c-470c-a7b6-e9484879b77f.woff2") format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } /* latin-ext */ @font-face { font-family: 'Geist'; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/aaa4b97a-c6b4-4ddb-ae96-ddc8df45a728.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Geist'; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/17776917-8a9d-4067-b565-dda05d4237e8.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* cyrillic-ext */ @font-face { font-family: 'Geist'; font-style: normal; font-weight: 500; font-display: swap; src: url("assets/7deff0c9-f9b9-4c96-8f04-50e7f3e98322.woff2") format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } /* cyrillic */ @font-face { font-family: 'Geist'; font-style: normal; font-weight: 500; font-display: swap; src: url("assets/d8a84bdf-1acc-4d5f-bf03-e7dab1579bfa.woff2") format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* vietnamese */ @font-face { font-family: 'Geist'; font-style: normal; font-weight: 500; font-display: swap; src: url("assets/26899bf1-475c-470c-a7b6-e9484879b77f.woff2") format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } /* latin-ext */ @font-face { font-family: 'Geist'; font-style: normal; font-weight: 500; font-display: swap; src: url("assets/aaa4b97a-c6b4-4ddb-ae96-ddc8df45a728.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Geist'; font-style: normal; font-weight: 500; font-display: swap; src: url("assets/17776917-8a9d-4067-b565-dda05d4237e8.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* cyrillic-ext */ @font-face { font-family: 'Geist'; font-style: normal; font-weight: 600; font-display: swap; src: url("assets/7deff0c9-f9b9-4c96-8f04-50e7f3e98322.woff2") format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } /* cyrillic */ @font-face { font-family: 'Geist'; font-style: normal; font-weight: 600; font-display: swap; src: url("assets/d8a84bdf-1acc-4d5f-bf03-e7dab1579bfa.woff2") format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* vietnamese */ @font-face { font-family: 'Geist'; font-style: normal; font-weight: 600; font-display: swap; src: url("assets/26899bf1-475c-470c-a7b6-e9484879b77f.woff2") format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } /* latin-ext */ @font-face { font-family: 'Geist'; font-style: normal; font-weight: 600; font-display: swap; src: url("assets/aaa4b97a-c6b4-4ddb-ae96-ddc8df45a728.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Geist'; font-style: normal; font-weight: 600; font-display: swap; src: url("assets/17776917-8a9d-4067-b565-dda05d4237e8.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* cyrillic-ext */ @font-face { font-family: 'Geist'; font-style: normal; font-weight: 700; font-display: swap; src: url("assets/7deff0c9-f9b9-4c96-8f04-50e7f3e98322.woff2") format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } /* cyrillic */ @font-face { font-family: 'Geist'; font-style: normal; font-weight: 700; font-display: swap; src: url("assets/d8a84bdf-1acc-4d5f-bf03-e7dab1579bfa.woff2") format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* vietnamese */ @font-face { font-family: 'Geist'; font-style: normal; font-weight: 700; font-display: swap; src: url("assets/26899bf1-475c-470c-a7b6-e9484879b77f.woff2") format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } /* latin-ext */ @font-face { font-family: 'Geist'; font-style: normal; font-weight: 700; font-display: swap; src: url("assets/aaa4b97a-c6b4-4ddb-ae96-ddc8df45a728.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Geist'; font-style: normal; font-weight: 700; font-display: swap; src: url("assets/17776917-8a9d-4067-b565-dda05d4237e8.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* cyrillic-ext */ @font-face { font-family: 'Geist'; font-style: normal; font-weight: 800; font-display: swap; src: url("assets/7deff0c9-f9b9-4c96-8f04-50e7f3e98322.woff2") format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } /* cyrillic */ @font-face { font-family: 'Geist'; font-style: normal; font-weight: 800; font-display: swap; src: url("assets/d8a84bdf-1acc-4d5f-bf03-e7dab1579bfa.woff2") format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* vietnamese */ @font-face { font-family: 'Geist'; font-style: normal; font-weight: 800; font-display: swap; src: url("assets/26899bf1-475c-470c-a7b6-e9484879b77f.woff2") format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } /* latin-ext */ @font-face { font-family: 'Geist'; font-style: normal; font-weight: 800; font-display: swap; src: url("assets/aaa4b97a-c6b4-4ddb-ae96-ddc8df45a728.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Geist'; font-style: normal; font-weight: 800; font-display: swap; src: url("assets/17776917-8a9d-4067-b565-dda05d4237e8.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* cyrillic-ext */ @font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/966913ef-0d9e-45be-88a7-8e4d838e7c1b.woff2") format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } /* cyrillic */ @font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/df6867a3-5706-4ce5-af81-f98b7a910871.woff2") format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* symbols2 */ @font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/0acf5d3a-c3e8-4a46-afb2-adaba5e696fb.woff2") format('woff2'); unicode-range: U+2000-2001, U+2004-2008, U+200A, U+23B8-23BD, U+2500-259F; } /* vietnamese */ @font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/8fde8afc-40bb-4142-933d-168d6531441a.woff2") format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } /* latin-ext */ @font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/542199b9-bb75-435a-8210-1db8f1ecce90.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/6ae7f78a-beef-44a3-8ac1-be7b08c2bb3f.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* cyrillic-ext */ @font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url("assets/966913ef-0d9e-45be-88a7-8e4d838e7c1b.woff2") format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } /* cyrillic */ @font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url("assets/df6867a3-5706-4ce5-af81-f98b7a910871.woff2") format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* symbols2 */ @font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url("assets/0acf5d3a-c3e8-4a46-afb2-adaba5e696fb.woff2") format('woff2'); unicode-range: U+2000-2001, U+2004-2008, U+200A, U+23B8-23BD, U+2500-259F; } /* vietnamese */ @font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url("assets/8fde8afc-40bb-4142-933d-168d6531441a.woff2") format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } /* latin-ext */ @font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url("assets/542199b9-bb75-435a-8210-1db8f1ecce90.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url("assets/6ae7f78a-beef-44a3-8ac1-be7b08c2bb3f.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* cyrillic-ext */ @font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url("assets/966913ef-0d9e-45be-88a7-8e4d838e7c1b.woff2") format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } /* cyrillic */ @font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url("assets/df6867a3-5706-4ce5-af81-f98b7a910871.woff2") format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* symbols2 */ @font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url("assets/0acf5d3a-c3e8-4a46-afb2-adaba5e696fb.woff2") format('woff2'); unicode-range: U+2000-2001, U+2004-2008, U+200A, U+23B8-23BD, U+2500-259F; } /* vietnamese */ @font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url("assets/8fde8afc-40bb-4142-933d-168d6531441a.woff2") format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } /* latin-ext */ @font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url("assets/542199b9-bb75-435a-8210-1db8f1ecce90.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url("assets/6ae7f78a-beef-44a3-8ac1-be7b08c2bb3f.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Poppins SemiBold — solo para el wordmark "arcahost" del header/footer (brand guideline: Poppins SemiBold 600, minúsculas, ver Logos/readme.md). Antes se cargaba la familia completa (pesos 500/600/700) desde Google Fonts CDN para ~8 letras; acá va auto-hosteado y subseteado a las 7 glifos que realmente se usan (a c h o r s t), igual que Geist arriba. */ @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url("assets/poppins-semibold-wordmark.woff2") format('woff2'); unicode-range: U+0061, U+0063, U+0068, U+006F, U+0072, U+0073, U+0074; } /* ============================================================================ ArcaHost — Color tokens Transcribed 1:1 from apps/web/src/app/globals.css (light theme = source of truth). Color space: OKLCH. Primary hue 55° = NARANJA-ÁMBAR (warm amber), NOT teal — the original code comment mislabels it; the rendered color is amber. ========================================================================== */ :root { /* ── Re-theming knobs (the 3 values a hotel can override) ───────────────── */ --color-primary-raw: 0.45 0.10 255; /* slate indigo — panel admin */ --color-sidebar-raw: 0.15 0.02 60; /* gris muy oscuro cálido (sin cambios) */ --color-accent-raw: 0.60 0.10 255; /* indigo claro */ --color-brand-raw: 0.55 0.15 55; /* ámbar de marca — usar en superficie pública */ /* ── Surfaces & text ────────────────────────────────────────────────────── */ --background: oklch(0.985 0.002 80); /* lienzo cálido casi blanco */ --foreground: oklch(0.18 0.02 60); /* texto principal, gris cálido */ --card: oklch(1 0 0); /* superficie de tarjeta */ --card-foreground: oklch(0.18 0.02 60); --popover: oklch(1 0 0); --popover-foreground: oklch(0.18 0.02 60); /* ── Brand ──────────────────────────────────────────────────────────────── */ --primary: oklch(var(--color-primary-raw)); --primary-foreground: oklch(1 0 0); --accent: oklch(var(--color-accent-raw)); --accent-foreground: oklch(0.18 0.02 60); /* ── Neutrals ───────────────────────────────────────────────────────────── */ --secondary: oklch(0.96 0.01 80); --secondary-foreground: oklch(0.25 0.02 60); --muted: oklch(0.94 0.01 80); --muted-foreground: oklch(0.45 0.02 60); --border: oklch(0.90 0.02 80); --input: oklch(0.92 0.01 80); --ring: oklch(var(--color-primary-raw)); /* ── Semantic: destructivo ──────────────────────────────────────────────── */ --destructive: oklch(0.55 0.22 25); /* rojo */ --destructive-foreground: oklch(1 0 0); /* ── Gráficos (recharts) ────────────────────────────────────────────────── */ --chart-1: oklch(0.55 0.15 55); --chart-2: oklch(0.65 0.12 55); --chart-3: oklch(0.50 0.10 180); --chart-4: oklch(0.70 0.14 85); --chart-5: oklch(0.60 0.18 25); /* ── Sidebar (oscuro, siempre) ──────────────────────────────────────────── */ --sidebar: oklch(var(--color-sidebar-raw)); --sidebar-foreground: oklch(0.95 0.01 80); --sidebar-primary: oklch(var(--color-primary-raw)); --sidebar-primary-foreground: oklch(1 0 0); --sidebar-accent: oklch(0.25 0.02 60); --sidebar-accent-foreground: oklch(0.95 0.01 80); --sidebar-border: oklch(0.25 0.02 60); --sidebar-ring: oklch(var(--color-primary-raw)); } /* ── Tema oscuro (.dark) ──────────────────────────────────────────────────── */ .dark { --background: oklch(0.12 0.02 60); --foreground: oklch(0.95 0.01 80); --card: oklch(0.16 0.02 60); --card-foreground: oklch(0.95 0.01 80); --popover: oklch(0.16 0.02 60); --popover-foreground: oklch(0.95 0.01 80); --primary: oklch(0.62 0.12 255); --primary-foreground: oklch(0.12 0.02 60); --secondary: oklch(0.22 0.02 60); --secondary-foreground: oklch(0.95 0.01 80); --muted: oklch(0.22 0.02 60); --muted-foreground: oklch(0.65 0.02 80); --accent: oklch(0.55 0.10 255); --accent-foreground: oklch(0.95 0.01 80); --destructive: oklch(0.50 0.20 25); --destructive-foreground: oklch(0.95 0.01 80); --border: oklch(0.25 0.02 60); --input: oklch(0.22 0.02 60); --ring: oklch(0.60 0.10 255); --chart-1: oklch(0.62 0.12 255); --chart-2: oklch(0.55 0.15 55); --chart-3: oklch(0.60 0.10 180); --chart-4: oklch(0.65 0.14 85); --chart-5: oklch(0.55 0.18 25); --sidebar: oklch(0.10 0.02 60); --sidebar-foreground: oklch(0.95 0.01 80); --sidebar-primary: oklch(0.60 0.12 255); --sidebar-primary-foreground: oklch(1 0 0); --sidebar-accent: oklch(0.20 0.02 60); --sidebar-accent-foreground: oklch(0.95 0.01 80); --sidebar-border: oklch(0.22 0.02 60); --sidebar-ring: oklch(0.60 0.12 255); } /* ============================================================================ ArcaHost — Tipografía Fonts: Geist Sans (UI) + Geist Mono (datos/código), cargadas en layout.tsx vía next/font (Google Fonts). Tailwind las expone como --font-sans/--font-mono. Card titles usan font-heading (= Geist Sans, peso medio). ========================================================================== */ :root { /* ── Familias ───────────────────────────────────────────────────────────── */ --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-mono: "Geist Mono", ui-monospace, "SF Mono", "Cascadia Code", "Roboto Mono", Menlo, Consolas, monospace; --font-heading: var(--font-sans); /* ── Escala de tamaños (Tailwind text-* usados en la app) ───────────────── */ --text-2xs: 0.625rem; /* 10px — etiquetas micro: rol sidebar, "by ArcaHost" */ --text-xs: 0.75rem; /* 12px — meta, badges, leyendas */ --text-sm: 0.875rem; /* 14px — texto base de la UI (densidad alta) */ --text-base: 1rem; /* 16px — cuerpo en vistas públicas */ --text-lg: 1.125rem; /* 18px — títulos de card de paso */ --text-xl: 1.25rem; /* 20px — precios, CardTitle login */ --text-2xl: 1.5rem; /* 24px — bienvenida, encabezados de página */ /* ── Pesos ──────────────────────────────────────────────────────────────── */ --weight-normal: 400; --weight-medium: 500; /* peso por defecto de botones / nav / títulos card */ --weight-semibold: 600; /* nombres de hotel, totales, headings */ --weight-bold: 700; /* precios, KPIs, número del día en calendario */ /* ── Interlineado ───────────────────────────────────────────────────────── */ --leading-none: 1; --leading-tight: 1.15; --leading-snug: 1.3; /* CardTitle */ --leading-normal: 1.5; --leading-relaxed: 1.6; /* cuerpo de emails / prosa */ /* ── Tracking ───────────────────────────────────────────────────────────── */ --tracking-wider: 0.05em; /* labels uppercase: rol, secciones de sidebar */ } /* ============================================================================ ArcaHost — Espaciado, radios, sombras, layout Tailwind v4 default spacing scale (0.25rem step). Radio base --radius:0.5rem, con derivados sm/md/lg/xl como en @theme inline de globals.css. ========================================================================== */ :root { /* ── Radio (shadcn) ─────────────────────────────────────────────────────── */ --radius: 0.5rem; /* base */ --radius-sm: calc(var(--radius) - 4px); /* 4px */ --radius-md: calc(var(--radius) - 2px); /* 6px */ --radius-lg: var(--radius); /* 8px — botones (rounded-lg) */ --radius-xl: calc(var(--radius) + 4px); /* 12px — cards (rounded-xl) */ --radius-pill: 9999px; /* badges (rounded-4xl ≈ pill) */ /* ── Escala de espaciado (subset usado en la app) ───────────────────────── */ --space-0_5: 0.125rem; /* 2px */ --space-1: 0.25rem; /* 4px */ --space-1_5: 0.375rem; /* 6px */ --space-2: 0.5rem; /* 8px */ --space-2_5: 0.625rem; /* 10px */ --space-3: 0.75rem; /* 12px — padding interno de nav / card sm */ --space-4: 1rem; /* 16px — padding de card / gap por defecto */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px — padding de main (desktop) */ --space-8: 2rem; /* 32px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ /* ── Medidas de layout fijas (de la app real) ───────────────────────────── */ --sidebar-width: 16rem; /* w-64 */ --header-height: 4rem; /* h-16 */ --content-max: 42rem; /* max-w-2xl — vista pública de reservas */ --button-height: 2rem; /* h-8 — botón default (UI densa) */ --badge-height: 1.25rem; /* h-5 */ /* ── Sombras ────────────────────────────────────────────────────────────── */ --shadow-xs: 0 1px 2px 0 oklch(0 0 0 / 0.05); --shadow-sm: 0 1px 3px 0 oklch(0 0 0 / 0.08), 0 1px 2px -1px oklch(0 0 0 / 0.08); --shadow-md: 0 4px 6px -1px oklch(0 0 0 / 0.08), 0 2px 4px -2px oklch(0 0 0 / 0.06); --shadow-2xl: 0 25px 50px -12px oklch(0 0 0 / 0.25); /* card del login */ /* Las cards NO usan box-shadow por defecto: usan ring-1 ring-foreground/10. Este token reproduce ese halo de 1px. */ --ring-card: 0 0 0 1px oklch(0.18 0.02 60 / 0.10); } /* ============================================================================ ArcaHost — Estados de reserva (semántica de negocio) Fuente: components/reservations/reservation-calendar.tsx → DEFAULT_COLORS. Estos colores pintan las barras del calendario Gantt, los badges de estado y las leyendas. Cada propiedad puede sobre-escribirlos vía calendarColors (JSON). Los valores nativos son HEX (así viven en el código), expuestos aquí como tokens. ========================================================================== */ :root { --status-reserved: #06b6d4; /* Reservada — cian */ --status-partial: #f59e0b; /* Abono parcial — ámbar */ --status-paid: #22c55e; /* Pagada — verde */ --status-confirmed: #3b82f6; /* Confirmada — azul */ --status-checked-in: #16a34a; /* En casa — verde oscuro */ --status-checked-out: #a16207; /* Check-out — ámbar oscuro */ --status-no-show: #ef4444; /* No Show — rojo */ --status-cancelled: #9ca3af; /* Cancelada — gris */ --status-pending: #a855f7; /* Pendiente — púrpura */ /* Indicador de consumos pendientes de cobro (punto naranja) */ --status-pending-charges: #fdba74; /* orange-300 */ /* Origen de reserva online (badge "Online" en la lista) */ --source-online: #3b82f6; /* azul (icono Globe) */ } /* Superficie pública — restaura el ámbar de marca (el admin usa slate indigo) */ :root { --color-primary-raw: 0.55 0.15 55; --color-accent-raw: 0.65 0.12 55; --primary: #0093B8; --accent: #FFB400; --ring: #0093B8; } html { scroll-behavior: smooth; } body { margin: 0; background: oklch(0.985 0.002 80); color: oklch(0.18 0.02 60); font-family: var(--font-sans, "Geist", system-ui, sans-serif); -webkit-font-smoothing: antialiased; } @keyframes tpMarqueeUp { from { transform: translateY(0); } to { transform: translateY(-50%); } } @keyframes tpBlink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } } .word-cycle-item { grid-area: 1 / 1; opacity: 0; animation: word-rotate 8s infinite; } .word-cycle-item:nth-child(1) { opacity: 1; animation-delay: 0s; } .word-cycle-item:nth-child(2) { animation-delay: -2s; } .word-cycle-item:nth-child(3) { animation-delay: -4s; } .word-cycle-item:nth-child(4) { animation-delay: -6s; } @keyframes word-rotate { 0% { opacity: 0; transform: translateY(10px) skewX(-4deg); filter: blur(3px); } 5.625% { opacity: 1; transform: translateY(0) skewX(0deg); filter: blur(0); animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); } 19.375% { opacity: 1; transform: translateY(0) skewX(0deg); filter: blur(0); } 25% { opacity: 0; transform: translateY(0) skewX(0deg); filter: blur(0); } 100% { opacity: 0; transform: translateY(10px) skewX(-4deg); filter: blur(3px); } } @media (prefers-reduced-motion: reduce) { * { animation: none !important; } } .wa-float{position:fixed;right:20px;bottom:20px;width:56px;height:56px;border-radius:50%;background:#25D366;color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(0,0,0,.28);z-index:9999;transition:transform .15s ease,box-shadow .15s ease;text-decoration:none;} .wa-float:hover{transform:scale(1.08);box-shadow:0 6px 18px rgba(0,0,0,.32);} .wa-float svg{width:30px;height:30px;display:block;} @media (max-width:640px){.wa-float{right:16px;bottom:16px;width:52px;height:52px;} .wa-float svg{width:27px;height:27px;}} /* ============================================================================ Demo "Crea una reserva en segundos" — loop CSS puro, 9.2s, reemplaza el state-machine JS del bundler original. Ver docs/agents/../../hero-demo-spec.md (spec extraída del bundle) para el detalle del timeline. Estado de reposo (t=0 / cuando no hay animación) = idle: cursor quieto, modal cerrado, chip 1 activo. ========================================================================== */ .tp-demo * { box-sizing: border-box; } .tp-demo, .tp-demo * { animation-duration: 16.2s; animation-iteration-count: infinite; animation-fill-mode: both; } /* Slide 2 del carrusel: demo "reserva desde el bot de WhatsApp" — comparte el mismo ciclo maestro de 16.2s que el demo del panel (9.2s + 0.5s transición + 6s + 0.5s transición), para que ambos loops queden siempre en fase — ver .tp-carousel-track más abajo, que es quien controla el cambio de slide. */ .tp-wa-demo * { box-sizing: border-box; } .tp-wa-demo, .tp-wa-demo * { animation-duration: 16.2s; animation-iteration-count: infinite; animation-fill-mode: both; } /* Carrusel: sin scroll manual — el track se desliza solo, sincronizado con el fin de cada demo (panel visible 0%–56.79% = sus 9.2s; WhatsApp visible 59.877%–96.914% = sus 6s; el resto son las dos transiciones de 0.5s). */ .tp-carousel-viewport { width: 100%; overflow: hidden; } .tp-carousel-track { display: flex; width: 200%; } @keyframes tpCarouselTrack { 0% { transform: translateX(0%); } 56.79% { transform: translateX(0%); } 59.877% { transform: translateX(-50%); } 96.914% { transform: translateX(-50%); } 100% { transform: translateX(0%); } } .tp-carousel-track { animation: tpCarouselTrack 16.2s ease-in-out infinite; transform: translateX(0%); } @keyframes tpDot0 { 0% { background: var(--primary); } 56.79% { background: var(--primary); } 56.85% { background: var(--border); } 100% { background: var(--border); } } @keyframes tpDot1 { 0% { background: var(--border); } 56.79% { background: var(--border); } 56.85% { background: var(--primary); } 100% { background: var(--primary); } } .tp-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border); animation-duration: 16.2s; animation-timing-function: linear; animation-iteration-count: infinite; animation-fill-mode: both; } .tp-dot:nth-child(1) { animation-name: tpDot0; background: var(--primary); } .tp-dot:nth-child(2) { animation-name: tpDot1; } @keyframes tpWaMsg1 { 59.877% { opacity: 0; transform: translateY(6px); } 62.84% { opacity: 0; transform: translateY(6px); } 63.951% { opacity: 1; transform: translateY(0); } 92.469% { opacity: 1; transform: translateY(0); } 94.691% { opacity: 0; transform: translateY(6px); } 96.914% { opacity: 0; transform: translateY(6px); } } .tp-wa-msg1 { animation-name: tpWaMsg1; animation-timing-function: linear; opacity: 0; } @keyframes tpWaTyping { 59.877% { opacity: 0; } 75.432% { opacity: 0; } 76.543% { opacity: 1; } 80.617% { opacity: 1; } 81.728% { opacity: 0; } 96.914% { opacity: 0; } } .tp-wa-typing { animation-name: tpWaTyping; animation-timing-function: linear; opacity: 0; } @keyframes tpWaMsg2 { 59.877% { opacity: 0; transform: translateY(6px); } 81.728% { opacity: 0; transform: translateY(6px); } 82.84% { opacity: 1; transform: translateY(0); } 92.469% { opacity: 1; transform: translateY(0); } 94.691% { opacity: 0; transform: translateY(6px); } 96.914% { opacity: 0; transform: translateY(6px); } } .tp-wa-msg2 { animation-name: tpWaMsg2; animation-timing-function: linear; opacity: 0; } @keyframes tpWaDotBounce { 0%, 60%, 100% { transform: translateY(0); opacity: .4; } 30% { transform: translateY(-3px); opacity: 1; } } .tp-wa-dot { width: 6px; height: 6px; border-radius: 50%; background: #8696a0; display: inline-block; animation: tpWaDotBounce 1s ease-in-out infinite; } .tp-wa-dot:nth-child(2) { animation-delay: .15s; } .tp-wa-dot:nth-child(3) { animation-delay: .3s; } @keyframes tpWaChip0 { 59.877% { background: var(--primary); color: #fff; border-color: var(--primary); } 81.358% { background: var(--primary); color: #fff; border-color: var(--primary); } 82.099% { background: transparent; color: var(--muted-foreground); border-color: var(--border); } 96.914% { background: transparent; color: var(--muted-foreground); border-color: var(--border); } } @keyframes tpWaChip1 { 59.877% { background: transparent; color: var(--muted-foreground); border-color: var(--border); } 81.358% { background: transparent; color: var(--muted-foreground); border-color: var(--border); } 82.099% { background: var(--primary); color: #fff; border-color: var(--primary); } 96.914% { background: var(--primary); color: #fff; border-color: var(--primary); } } .tp-wa-chip { border: 1px solid var(--border); background: transparent; color: var(--muted-foreground); animation-timing-function: linear; animation-duration: 16.2s; animation-iteration-count: infinite; animation-fill-mode: both; cursor: default; } .tp-wa-chip[data-step="0"] { animation-name: tpWaChip0; } .tp-wa-chip[data-step="1"] { animation-name: tpWaChip1; } @keyframes tpCur { 0% { transform: translate(470px, 280px) scale(1); } 2.47% { transform: translate(856px, 30px) scale(1); } 7.099% { transform: translate(856px, 30px) scale(0.8); } 8.95% { transform: translate(856px, 30px) scale(1); } 9.876% { transform: translate(600px, 170px) scale(1); } 29.008% { transform: translate(600px, 170px) scale(1); } 29.014% { transform: translate(510px, 400px) scale(1); } 34.875% { transform: translate(510px, 400px) scale(0.8); } 37.039% { transform: translate(510px, 400px) scale(1); } 37.345% { transform: translate(640px, 300px) scale(1); } 56.79% { transform: translate(640px, 300px) scale(1); } } .tp-cur { animation-name: tpCur; animation-timing-function: ease-in-out; transform: translate(470px, 280px) scale(1); } @keyframes tpNuevaBtn { 0% { transform: scale(1); box-shadow: 0 0 0 0 transparent; } 4.316% { box-shadow: 0 0 0 0 transparent; } 4.322% { box-shadow: 0 0 0 4px color-mix(in oklch, var(--primary) 35%, transparent); } 7.099% { transform: scale(1); box-shadow: 0 0 0 4px color-mix(in oklch, var(--primary) 35%, transparent); } 7.104% { transform: scale(0.93); } 8.95% { transform: scale(0.93); } 8.956% { transform: scale(1); } 9.251% { box-shadow: 0 0 0 4px color-mix(in oklch, var(--primary) 35%, transparent); } 9.257% { box-shadow: 0 0 0 0 transparent; } 56.79% { transform: scale(1); box-shadow: 0 0 0 0 transparent; } } .tp-nueva-btn { animation-name: tpNuevaBtn; animation-timing-function: linear; } @keyframes tpModal { 0% { opacity: 0; } 9.251% { opacity: 0; } 9.257% { opacity: 1; } 37.34% { opacity: 1; } 37.345% { opacity: 0; } 56.79% { opacity: 0; } } .tp-modal { animation-name: tpModal; animation-timing-function: linear; opacity: 0; pointer-events: none; } @keyframes tpModalCard { 0% { transform: scale(0.96); } 9.251% { transform: scale(0.96); } 9.257% { transform: scale(1); } 37.34% { transform: scale(1); } 37.345% { transform: scale(0.96); } 56.79% { transform: scale(0.96); } } .tp-modal-card { animation-name: tpModalCard; animation-timing-function: linear; transform: scale(0.96); } @keyframes tpNameField { 0% { border-color: var(--border); box-shadow: 0 0 0 3px transparent; } 11.721% { border-color: var(--border); box-shadow: 0 0 0 3px transparent; } 11.727% { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in oklch, var(--primary) 18%, transparent); } 26.538% { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in oklch, var(--primary) 18%, transparent); } 26.544% { border-color: var(--border); box-shadow: 0 0 0 3px transparent; } 56.79% { border-color: var(--border); box-shadow: 0 0 0 3px transparent; } } .tp-name-field { animation-name: tpNameField; animation-timing-function: linear; border: 1px solid var(--border); } @keyframes tpNameText { 0% { width: 0; } 11.721% { width: 0; } 17.9% { width: 10ch; } 56.79% { width: 10ch; } } .tp-name-text { display: inline-block; overflow: hidden; white-space: nowrap; vertical-align: bottom; width: 0; animation-name: tpNameText; animation-timing-function: steps(10, end); } @keyframes tpCaretWindow { 0% { visibility: hidden; } 11.721% { visibility: hidden; } 11.727% { visibility: visible; } 26.538% { visibility: visible; } 26.544% { visibility: hidden; } 56.79% { visibility: hidden; } } .tp-caret { width: 1.5px; height: 15px; background: var(--primary); display: inline-block; visibility: hidden; animation: tpCaretWindow 16.2s linear infinite, tpBlink 1s steps(1) infinite; } @keyframes tpRoomOff { 0% { opacity: 1; } 20.365% { opacity: 1; } 20.371% { opacity: 0; } 56.79% { opacity: 0; } } @keyframes tpRoomOn { 0% { opacity: 0; } 20.365% { opacity: 0; } 20.371% { opacity: 1; } 56.79% { opacity: 1; } } .tp-room-off { animation-name: tpRoomOff; animation-timing-function: linear; opacity: 1; } .tp-room-on { animation-name: tpRoomOn; animation-timing-function: linear; opacity: 0; position: absolute; left: 11px; } @keyframes tpDatesOff { 0% { opacity: 1; } 23.449% { opacity: 1; } 23.454% { opacity: 0; } 56.79% { opacity: 0; } } @keyframes tpDatesOn { 0% { opacity: 0; } 23.449% { opacity: 0; } 23.454% { opacity: 1; } 56.79% { opacity: 1; } } .tp-dates-off { animation-name: tpDatesOff; animation-timing-function: linear; opacity: 1; } .tp-dates-on { animation-name: tpDatesOn; animation-timing-function: linear; opacity: 0; position: absolute; left: 11px; } @keyframes tpTotal { 0% { opacity: 0; transform: translateY(8px); } 26.538% { opacity: 0; transform: translateY(8px); } 26.544% { opacity: 1; transform: translateY(0); } 56.79% { opacity: 1; transform: translateY(0); } } .tp-total { animation-name: tpTotal; animation-timing-function: linear; opacity: 0; transform: translateY(8px); } @keyframes tpConfirmBtn { 0% { transform: scale(1); } 34.869% { transform: scale(1); } 34.875% { transform: scale(0.95); } 37.039% { transform: scale(0.95); } 37.044% { transform: scale(1); } 56.79% { transform: scale(1); } } .tp-confirm-btn { animation-name: tpConfirmBtn; animation-timing-function: linear; } @keyframes tpNewBar { 0% { opacity: 0; transform: scaleX(0); } 37.646% { opacity: 0; transform: scaleX(0); } 37.652% { opacity: 1; transform: scaleX(1); } 56.79% { opacity: 1; transform: scaleX(1); } } .tp-newbar { animation-name: tpNewBar; animation-timing-function: linear; opacity: 0; transform: scaleX(0); transform-origin: left center; } @keyframes tpToast { 0% { opacity: 0; transform: translateY(12px); } 39.191% { opacity: 0; transform: translateY(12px); } 39.197% { opacity: 1; transform: translateY(0); } 53.082% { opacity: 1; transform: translateY(0); } 53.087% { opacity: 0; transform: translateY(12px); } 56.79% { opacity: 0; transform: translateY(12px); } } .tp-toast { animation-name: tpToast; animation-timing-function: linear; opacity: 0; transform: translateY(12px); pointer-events: none; } /* Chips de progreso — indicadores no-interactivos (no saltan el tiempo, ver Reporte UX) */ @keyframes tpChip0 { 0% { background: var(--primary); color: #fff; border-color: var(--primary); } 9.251% { background: var(--primary); color: #fff; border-color: var(--primary); } 9.257% { background: transparent; color: var(--muted-foreground); border-color: var(--border); } 56.79% { background: transparent; color: var(--muted-foreground); border-color: var(--border); } } @keyframes tpChip1 { 0% { background: transparent; color: var(--muted-foreground); border-color: var(--border); } 9.251% { background: transparent; color: var(--muted-foreground); border-color: var(--border); } 9.257% { background: var(--primary); color: #fff; border-color: var(--primary); } 29.008% { background: var(--primary); color: #fff; border-color: var(--primary); } 29.014% { background: transparent; color: var(--muted-foreground); border-color: var(--border); } 56.79% { background: transparent; color: var(--muted-foreground); border-color: var(--border); } } @keyframes tpChip2 { 0% { background: transparent; color: var(--muted-foreground); border-color: var(--border); } 29.008% { background: transparent; color: var(--muted-foreground); border-color: var(--border); } 29.014% { background: var(--primary); color: #fff; border-color: var(--primary); } 37.34% { background: var(--primary); color: #fff; border-color: var(--primary); } 37.345% { background: transparent; color: var(--muted-foreground); border-color: var(--border); } 56.79% { background: transparent; color: var(--muted-foreground); border-color: var(--border); } } @keyframes tpChip3 { 0% { background: transparent; color: var(--muted-foreground); border-color: var(--border); } 37.34% { background: transparent; color: var(--muted-foreground); border-color: var(--border); } 37.345% { background: var(--primary); color: #fff; border-color: var(--primary); } 56.79% { background: var(--primary); color: #fff; border-color: var(--primary); } } .tp-chip { border: 1px solid var(--border); background: transparent; color: var(--muted-foreground); animation-timing-function: linear; animation-duration: 16.2s; animation-iteration-count: infinite; animation-fill-mode: both; cursor: default; } .tp-chip[data-step="0"] { animation-name: tpChip0; } .tp-chip[data-step="1"] { animation-name: tpChip1; } .tp-chip[data-step="2"] { animation-name: tpChip2; } .tp-chip[data-step="3"] { animation-name: tpChip3; } /* Frame de reposo con motion reducido: en vez de congelar en el idle (t=0), se fuerza el frame de "resultado" (reserva creada, paso 4) — ver Reporte UX. */ @media (prefers-reduced-motion: reduce) { .tp-cur { display: none; } .tp-newbar { opacity: 1 !important; transform: scaleX(1) !important; } .tp-toast { opacity: 1 !important; transform: translateY(0) !important; } .tp-chip[data-step="0"] { background: transparent !important; color: var(--muted-foreground) !important; border-color: var(--border) !important; } .tp-chip[data-step="3"] { background: var(--primary) !important; color: #fff !important; border-color: var(--primary) !important; } /* Sin animación: el track queda quieto mostrando el panel (slide 1) — el bloque de WhatsApp permanece fuera de vista, así que su estado interno no es visible y no necesita forzarse. */ .tp-carousel-track { transform: translateX(0%) !important; } .tp-dot:nth-child(1) { background: var(--primary) !important; } .tp-dot:nth-child(2) { background: var(--border) !important; } } @media (max-width: 767px) { /* Demo animado: sin scroll, así que los mockups (960px y ~356px fijos) se reducen para caber en pantalla — antes de esto el scroll horizontal hacía el trabajo. */ .tp-demo { zoom: 0.32; } .tp-wa-demo { zoom: 0.76; } /* Header: ocultar nav links, reducir padding */ header[data-screen-label="Nav"] nav { display: none !important; } header[data-screen-label="Nav"] > div { padding: 0 16px !important; gap: 0 !important; } /* Header: ocultar botón WhatsApp en nav (aparece en hero) */ header[data-screen-label="Nav"] > div > div > a[target="_blank"] { display: none !important; } /* Hero: columna única, ocultar marquee de screenshots */ #inicio > div.hero-grid { grid-template-columns: 1fr !important; padding: 48px 20px 56px !important; gap: 0 !important; } #inicio div.hero-marquee { display: none !important; } /* Hero: reducir tamaño h1 y texto en móvil */ #inicio h1 { font-size: clamp(34px, 9vw, 44px) !important; } #inicio p.hero-lead { font-size: 16px !important; } /* Hero: botones full-width en móvil muy pequeño */ #inicio div.hero-ctas { flex-direction: column !important; gap: 10px !important; } #inicio div.hero-ctas > a { width: 100% !important; justify-content: center !important; /* border-box: sin esto el padding (24px por lado) se sumaba al 100% y el botón se salía ~48px por la derecha. Alto flexible por si el texto parte en dos líneas en pantallas angostas (320px). */ box-sizing: border-box; height: auto; min-height: 48px; padding-top: 10px; padding-bottom: 10px; text-align: center; } /* Secciones: reducir padding vertical */ section[id="producto"], section[id="modulos"], section[id="precios"] { padding: 56px 0 !important; } /* Contenedores internos: reducir padding lateral */ section[id] > div.section-inner { padding: 0 20px !important; } /* Demo animado: el carrusel se anima solo (transform), no requiere ajuste de overflow/scroll en ningún tamaño de pantalla. */ /* Módulos: columna única */ #modulos div.mod-grid { grid-template-columns: 1fr !important; } #modulos div.mod-span2 { grid-column: span 1 !important; } /* Módulos: Enlace público — inner grid a columna única */ #modulos div.mod-link-grid { grid-template-columns: 1fr !important; } /* Precios: columna única */ #precios div.price-grid { grid-template-columns: 1fr !important; } #precios > div > div.price-wrap { max-width: 100% !important; } /* CTA final: reducir padding en móvil */ section[data-screen-label="CTA final"] div.cta-box { padding: 56px 24px !important; } section[data-screen-label="CTA final"] h2 { font-size: clamp(26px, 7vw, 36px) !important; } /* Footer: columna única */ footer div.footer-grid { grid-template-columns: 1fr !important; } footer > div { padding: 40px 20px 24px !important; gap: 28px !important; } /* Footer bottom bar: apilar en móvil */ footer div.footer-bar { flex-direction: column !important; align-items: flex-start !important; gap: 6px !important; } } @media (min-width: 480px) and (max-width: 767px) { /* Móvil medio: botones en fila si caben */ #inicio div.hero-ctas { flex-direction: row !important; flex-wrap: wrap !important; } #inicio div.hero-ctas > a { width: auto !important; flex: 1 1 auto !important; } } @media (min-width: 768px) and (max-width: 1023px) { /* Demo animado: el mockup del panel (960px fijo) no cabe en tablet sin reducirlo un poco; el de WhatsApp (~356px) ya cabe sin ajuste. */ .tp-demo { zoom: 0.72; } /* Tablet: hero columna única, marquee con altura reducida */ #inicio > div.hero-grid { grid-template-columns: 1fr !important; padding: 64px 32px 72px !important; gap: 40px !important; } #inicio div.hero-marquee { height: 380px !important; } /* Módulos: 2 columnas */ #modulos div.mod-grid { grid-template-columns: repeat(2, 1fr) !important; } #modulos div.mod-span2 { grid-column: span 2 !important; } /* Módulos: Enlace público inner grid — 1fr + 240px en tablet */ #modulos div.mod-link-grid { grid-template-columns: minmax(0, 1fr) 240px !important; } /* Precios: mantener 3 columnas en tablet (evita layout 2+1 desbalanceado) */ /* Contenedores internos */ section[id] > div.section-inner { padding: 0 24px !important; } #precios > div > div.price-wrap { max-width: 100% !important; } } /* ============================================================================ Estilos de index.html (antes inline en style="...", extraídos el 2026-10-04) Una clase por combinación de estilos: -[-n]; "u-*" = la misma combinación se usa en más de una sección. Van al final del archivo para conservar la precedencia que tenían como inline frente al resto de reglas. Las clases hook (hero-grid, mod-grid, price-grid, footer-bar, etc.) son las que usan las media queries responsive de más arriba. ========================================================================== */ /* --- Compartidos entre secciones --- */ .u-span-1 { color: var(--foreground); } .u-div-1 { display: flex; align-items: center; justify-content: space-between; } .u-div-2 { display: flex; align-items: center; gap: 6px; } .u-div-3 { flex: 1; min-width: 0; } .u-div-4 { font-size: 10.5px; color: var(--muted-foreground); } .u-div-5 { font-family: var(--font-mono, monospace); font-size: 12px; font-weight: 600; } .u-div-6 { display: flex; align-items: center; gap: 8px; } .u-div-7 { max-width: 1160px; margin: 0 auto; padding: 0 28px; display: flex; flex-direction: column; align-items: center; gap: 18px; } .u-span-2 { font-family: var(--font-mono, monospace); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--primary); font-weight: 600; } .u-span-3 { font-size: 12px; font-weight: 600; } .u-section-1 { padding: 96px 0; background: color-mix(in oklch, var(--muted) 50%, transparent); } .u-span-4 { color: #ffffff; } .u-span-5 { color: #00D4C4; } /* --- Header / nav --- */ .nav-header { position: sticky; top: 0; z-index: 60; backdrop-filter: blur(14px); background: color-mix(in oklch, oklch(0.985 0.002 80) 78%, transparent); border-bottom: 1px solid color-mix(in oklch, var(--border) 70%, transparent); } .nav-div-1 { max-width: 1160px; margin: 0 auto; padding: 0 28px; height: 64px; display: flex; align-items: center; gap: 28px; } .nav-a-1 { display: flex; align-items: center; gap: 9px; text-decoration: none; } .nav-img { height: 40px; display: block; } .nav-span-1 { font-family: 'Poppins', sans-serif; font-size: 21px; font-weight: 600; letter-spacing: -0.01em; line-height: 1; } .nav-span-2 { color: #0D1326; } .nav-span-3 { color: #0093B8; } .nav-nav { display: flex; gap: 4px; margin-left: 12px; } .nav-a-2 { font-size: 14px; font-weight: 500; color: var(--muted-foreground); text-decoration: none; padding: 6px 10px; border-radius: 8px; transition: background-color .15s, color .15s; } .nav-div-2 { margin-left: auto; display: flex; align-items: center; gap: 10px; } .nav-a-3 { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; border-radius: 10px; background: var(--primary); color: #fff; font-size: 14px; font-weight: 500; text-decoration: none; transition: background-color .15s, transform .04s; } /* --- Hero (#inicio) --- */ .hero-section { position: relative; overflow: hidden; } .hero-div-1 { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(720px 360px at 72% -5%, color-mix(in oklch, var(--primary) 13%, transparent), transparent 70%); } .hero-div-2 { max-width: 1160px; margin: 0 auto; padding: 84px 28px 96px; display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr); gap: 56px; align-items: center; position: relative; } .hero-div-3 { display: flex; flex-direction: column; gap: 26px; align-items: flex-start; } .hero-span-1 { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono, monospace); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--primary); border: 1px solid color-mix(in oklch, var(--primary) 35%, transparent); background: color-mix(in oklch, var(--primary) 7%, transparent); padding: 6px 12px; border-radius: 999px; } .hero-span-2 { width: 6px; height: 6px; border-radius: 50%; background: var(--primary); } .hero-h1 { margin: 0; font-size: clamp(44px, 5.2vw, 66px); line-height: 1.04; font-weight: 700; letter-spacing: -0.03em; text-wrap: balance; } .hero-span-3 { color: var(--primary); display: inline-grid; } .hero-lead { margin: 0; font-size: 18px; line-height: 1.65; color: var(--muted-foreground); max-width: 52ch; text-wrap: pretty; } .hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; } .hero-a-1 { display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 24px; border-radius: 12px; background: var(--primary); color: #fff; font-size: 16px; font-weight: 600; text-decoration: none; transition: background-color .15s, transform .04s; } .hero-a-2 { display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 22px; border-radius: 12px; border: 1px solid var(--border); background: var(--card); color: var(--foreground); font-size: 16px; font-weight: 500; text-decoration: none; transition: background-color .15s; } .hero-p { margin: 4px 0 0; font-family: var(--font-mono, monospace); font-size: 13px; color: var(--muted-foreground); } .hero-marquee { height: 560px; overflow: hidden; position: relative; -webkit-mask-image: linear-gradient(to bottom, transparent, black 12%, black 88%, transparent); mask-image: linear-gradient(to bottom, transparent, black 12%, black 88%, transparent); } .hero-div-4 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; transform: rotate(0.001deg); } .hero-div-5 { display: flex; flex-direction: column; gap: 16px; animation: tpMarqueeUp 30s linear infinite; } .hero-div-6 { display: flex; flex-direction: column; gap: 16px; } .hero-div-7 { background: var(--card); border-radius: 14px; box-shadow: 0 0 0 1px color-mix(in oklch, var(--foreground) 10%, transparent), 0 8px 24px -16px color-mix(in oklch, var(--foreground) 25%, transparent); padding: 16px; display: flex; flex-direction: column; gap: 8px; } .hero-span-4 { font-size: 12px; font-weight: 500; color: var(--muted-foreground); } .hero-div-8 { font-family: var(--font-mono, monospace); font-size: 24px; font-weight: 700; letter-spacing: -0.02em; } .hero-span-5 { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 600; color: #15803d; background: #dcfce7; padding: 2px 7px; border-radius: 999px; } .hero-span-6 { font-size: 11px; color: var(--muted-foreground); } .hero-div-9 { background: var(--card); border-radius: 14px; box-shadow: 0 0 0 1px color-mix(in oklch, var(--foreground) 10%, transparent), 0 8px 24px -16px color-mix(in oklch, var(--foreground) 25%, transparent); padding: 16px; display: flex; flex-direction: column; gap: 12px; } .hero-span-7 { font-size: 13px; font-weight: 600; } .hero-div-10 { display: flex; align-items: center; gap: 10px; } .hero-span-8 { width: 26px; height: 26px; border-radius: 8px; background: #dcfce7; color: #16a34a; display: inline-flex; align-items: center; justify-content: center; } .hero-div-11 { font-size: 12.5px; font-weight: 600; } .hero-span-9 { font-size: 10.5px; font-weight: 600; color: #15803d; background: #dcfce7; padding: 2px 8px; border-radius: 999px; } .hero-span-10 { width: 26px; height: 26px; border-radius: 8px; background: var(--muted); color: var(--muted-foreground); display: inline-flex; align-items: center; justify-content: center; } .hero-span-11 { font-size: 10.5px; font-weight: 600; color: #166534; background: #bbf7d0; padding: 2px 8px; border-radius: 999px; } .hero-span-12 { font-size: 10.5px; font-weight: 600; color: #0e7490; background: #cffafe; padding: 2px 8px; border-radius: 999px; } .hero-div-12 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .hero-div-13 { display: flex; align-items: center; gap: 8px; background: var(--muted); border-radius: 10px; padding: 8px 10px; } .hero-span-13 { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; } .hero-span-14 { font-family: var(--font-mono, monospace); font-size: 15px; font-weight: 700; } .hero-span-15 { width: 8px; height: 8px; border-radius: 50%; background: #16a34a; } .hero-span-16 { width: 8px; height: 8px; border-radius: 50%; background: #f59e0b; } .hero-span-17 { width: 8px; height: 8px; border-radius: 50%; background: #ef4444; } .hero-div-14 { display: flex; flex-direction: column; gap: 16px; animation: tpMarqueeUp 38s linear infinite; } .hero-img { width: 28px; height: 28px; border-radius: 8px; } .hero-div-15 { font-size: 13px; font-weight: 700; } .hero-div-16 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .hero-div-17 { border: 1px solid var(--border); border-radius: 8px; padding: 7px 10px; } .hero-div-18 { font-size: 9.5px; color: var(--muted-foreground); text-transform: uppercase; letter-spacing: 0.06em; } .hero-div-19 { background: var(--primary); color: #fff; border-radius: 9px; padding: 9px 0; text-align: center; font-size: 12.5px; font-weight: 600; } .hero-div-20 { background: var(--card); border-radius: 14px; box-shadow: 0 0 0 1px color-mix(in oklch, var(--foreground) 10%, transparent), 0 8px 24px -16px color-mix(in oklch, var(--foreground) 25%, transparent); padding: 16px; display: flex; flex-direction: column; gap: 10px; } .hero-div-21 { display: flex; flex-direction: column; gap: 7px; } .hero-span-18 { width: 34px; font-family: var(--font-mono, monospace); font-size: 10.5px; color: var(--muted-foreground); } .hero-div-22 { flex: 1; height: 16px; border-radius: 6px; background: var(--muted); position: relative; } .hero-div-23 { position: absolute; left: 8%; width: 42%; top: 0; bottom: 0; border-radius: 6px; background: #06b6d4; color: #fff; font-size: 9px; font-weight: 600; display: flex; align-items: center; padding: 0 6px; overflow: hidden; } .hero-div-24 { position: absolute; left: 0%; width: 55%; top: 0; bottom: 0; border-radius: 6px; background: #22c55e; color: #fff; font-size: 9px; font-weight: 600; display: flex; align-items: center; padding: 0 6px; overflow: hidden; } .hero-div-25 { position: absolute; left: 22%; width: 46%; top: 0; bottom: 0; border-radius: 6px; background: #f59e0b; color: #fff; font-size: 9px; font-weight: 600; display: flex; align-items: center; padding: 0 6px; overflow: hidden; } .hero-div-26 { position: absolute; left: 48%; width: 50%; top: 0; bottom: 0; border-radius: 6px; background: #3b82f6; color: #fff; font-size: 9px; font-weight: 600; display: flex; align-items: center; padding: 0 6px; overflow: hidden; } .hero-div-27 { display: flex; align-items: baseline; justify-content: space-between; } .hero-span-19 { font-family: var(--font-mono, monospace); font-size: 20px; font-weight: 700; } .hero-div-28 { display: flex; align-items: flex-end; gap: 5px; height: 52px; } .hero-div-29 { flex: 1; height: 40%; border-radius: 4px 4px 0 0; background: color-mix(in oklch, var(--primary) 30%, transparent); } .hero-div-30 { flex: 1; height: 55%; border-radius: 4px 4px 0 0; background: color-mix(in oklch, var(--primary) 40%, transparent); } .hero-div-31 { flex: 1; height: 48%; border-radius: 4px 4px 0 0; background: color-mix(in oklch, var(--primary) 35%, transparent); } .hero-div-32 { flex: 1; height: 70%; border-radius: 4px 4px 0 0; background: color-mix(in oklch, var(--primary) 55%, transparent); } .hero-div-33 { flex: 1; height: 62%; border-radius: 4px 4px 0 0; background: color-mix(in oklch, var(--primary) 48%, transparent); } .hero-div-34 { flex: 1; height: 88%; border-radius: 4px 4px 0 0; background: var(--primary); } .hero-div-35 { flex: 1; height: 78%; border-radius: 4px 4px 0 0; background: color-mix(in oklch, var(--primary) 75%, transparent); } .hero-div-36 { font-size: 10.5px; color: var(--muted-foreground); font-family: var(--font-mono, monospace); } /* --- Demo animado (#producto) --- */ .demo-section { padding: 96px 0; background: linear-gradient(to bottom, transparent, color-mix(in oklch, var(--muted) 50%, transparent)); } .demo-h2 { margin: 0; font-size: clamp(32px, 3.6vw, 46px); font-weight: 700; letter-spacing: -0.025em; text-align: center; text-wrap: balance; } .demo-p { margin: 0 0 22px; font-size: 17px; line-height: 1.6; color: var(--muted-foreground); text-align: center; max-width: 58ch; text-wrap: pretty; } .demo-div-1 { flex: none; width: 50%; box-sizing: border-box; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 2px 4px; } .demo-div-2 { display: flex; justify-content: center; width: 100%; } .demo-div-3 { width: 960px; flex-shrink: 0; height: 600px; border-radius: 10px; overflow: hidden; box-shadow: 0 24px 80px rgba(0,0,0,0.35), 0 0 0 1px rgba(0,0,0,0.1); display: flex; flex-direction: column; background: #35363a; } .demo-div-4 { display: flex; align-items: center; height: 44px; background: #202124; padding-right: 8px; } .demo-div-5 { display: flex; gap: 8px; padding: 0 14px; } .demo-div-6 { width: 12px; height: 12px; border-radius: 50%; background: #ff5f57; } .demo-div-7 { width: 12px; height: 12px; border-radius: 50%; background: #febc2e; } .demo-div-8 { width: 12px; height: 12px; border-radius: 50%; background: #28c840; } .demo-div-9 { display: flex; align-items: flex-end; height: 100%; padding-left: 4px; flex: 1; } .demo-div-10 { position: relative; height: 34px; align-self: flex-end; padding: 0 12px; display: flex; align-items: center; gap: 8px; background: #35363a; border-radius: 8px 8px 0 0; min-width: 120px; max-width: 220px; font-family: system-ui, sans-serif; font-size: 12px; color: #e8eaed; } .demo-svg-1 { position: absolute; bottom: 0; left: -8px; } .demo-svg-2 { position: absolute; bottom: 0; right: -8px; transform: scaleX(-1); } .demo-div-11 { width: 14px; height: 14px; border-radius: 50%; background: #5f6368; flex-shrink: 0; } .demo-span-1 { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .demo-div-12 { height: 40px; background: #35363a; display: flex; align-items: center; gap: 4px; padding: 0 8px; } .demo-div-13 { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; } .demo-div-14 { width: 16px; height: 16px; border-radius: 50%; background: #9aa0a6; opacity: .4; } .demo-div-15 { flex: 1; height: 30px; border-radius: 15px; background: #282a2d; display: flex; align-items: center; gap: 8px; padding: 0 14px; margin: 0 6px; } .demo-div-16 { width: 12px; height: 12px; border-radius: 50%; background: #9aa0a6; opacity: .4; } .demo-span-2 { flex: 1; color: #e8eaed; font-size: 13px; font-family: system-ui, sans-serif; } .demo-div-17 { position: relative; width: 100%; height: 516px; background: oklch(0.985 0.002 80); font-family: var(--font-sans, 'Geist', system-ui, sans-serif); color: oklch(0.18 0.02 60); display: flex; overflow: hidden; cursor: default; user-select: none; flex: 1; } .demo-div-18 { width: 52px; background: oklch(0.15 0.02 60); display: flex; flex-direction: column; align-items: center; padding: 12px 0; gap: 14px; flex-shrink: 0; } .demo-img { width: 26px; height: 26px; border-radius: 7px; margin-bottom: 6px; } .demo-span-3 { width: 32px; height: 32px; border-radius: 9px; background: var(--primary); display: inline-flex; align-items: center; justify-content: center; } .demo-div-19 { flex: 1; min-width: 0; display: flex; flex-direction: column; } .demo-div-20 { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px 12px; } .demo-div-21 { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; } .demo-div-22 { font-size: 11.5px; color: var(--muted-foreground); } .demo-span-4 { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 13px; border-radius: 9px; background: var(--primary); color: #fff; font-size: 13px; font-weight: 500; } .demo-div-23 { margin: 4px 18px 16px; border: 1px solid var(--border); border-radius: 12px; background: #fff; overflow: hidden; flex: 1; } .demo-div-24 { display: grid; grid-template-columns: 96px repeat(10, 1fr); grid-auto-rows: minmax(0, 1fr); height: 100%; position: relative; } .demo-div-25 { grid-row: 1; grid-column: 1; border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); display: flex; align-items: center; padding: 0 10px; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-foreground); background: var(--muted); } .demo-div-26 { grid-row: 1; grid-column: 2; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; background: #fff; } .demo-span-5 { font-size: 9px; letter-spacing: 0.06em; color: var(--muted-foreground); } .demo-div-27 { grid-row: 1; grid-column: 3; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; background: #fff; } .demo-div-28 { grid-row: 1; grid-column: 4; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; background: var(--muted); } .demo-div-29 { grid-row: 1; grid-column: 5; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; background: var(--muted); } .demo-div-30 { grid-row: 1; grid-column: 6; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; background: #fff; } .demo-div-31 { grid-row: 1; grid-column: 7; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; background: #fff; } .demo-div-32 { grid-row: 1; grid-column: 8; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; background: #fff; } .demo-div-33 { grid-row: 1; grid-column: 9; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; background: #fff; } .demo-div-34 { grid-row: 1; grid-column: 10; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; background: #fff; } .demo-div-35 { grid-row: 1; grid-column: 11; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; background: var(--muted); } .demo-div-36 { grid-row: 2 / 7; grid-column: 4; background: color-mix(in oklch, var(--border) 40%, transparent); } .demo-div-37 { grid-row: 2 / 7; grid-column: 5; background: color-mix(in oklch, var(--border) 40%, transparent); } .demo-div-38 { grid-row: 2 / 7; grid-column: 11; background: color-mix(in oklch, var(--border) 40%, transparent); } .demo-div-39 { grid-row: 2; grid-column: 1; border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); display: flex; flex-direction: column; justify-content: center; padding: 0 10px; background: #fff; } .demo-span-6 { font-size: 10px; color: var(--muted-foreground); } .demo-div-40 { grid-row: 3; grid-column: 1; border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); display: flex; flex-direction: column; justify-content: center; padding: 0 10px; background: #fff; } .demo-div-41 { grid-row: 4; grid-column: 1; border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); display: flex; flex-direction: column; justify-content: center; padding: 0 10px; background: #fff; } .demo-div-42 { grid-row: 5; grid-column: 1; border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); display: flex; flex-direction: column; justify-content: center; padding: 0 10px; background: #fff; } .demo-div-43 { grid-row: 6; grid-column: 1; border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); display: flex; flex-direction: column; justify-content: center; padding: 0 10px; background: #fff; } .demo-div-44 { grid-row: 2; grid-column: 3 / 7; align-self: center; height: 22px; margin: 0 3px; border-radius: 7px; background: #22c55e; color: #fff; font-size: 10.5px; font-weight: 600; display: flex; align-items: center; padding: 0 8px; overflow: hidden; white-space: nowrap; } .demo-div-45 { grid-row: 3; grid-column: 2 / 4; align-self: center; height: 22px; margin: 0 3px; border-radius: 7px; background: #16a34a; color: #fff; font-size: 10.5px; font-weight: 600; display: flex; align-items: center; padding: 0 8px; overflow: hidden; white-space: nowrap; } .demo-div-46 { grid-row: 4; grid-column: 8 / 11; align-self: center; height: 22px; margin: 0 3px; border-radius: 7px; background: #f59e0b; color: #fff; font-size: 10.5px; font-weight: 600; display: flex; align-items: center; padding: 0 8px; overflow: hidden; white-space: nowrap; } .demo-div-47 { grid-row: 5; grid-column: 5 / 9; align-self: center; height: 22px; margin: 0 3px; border-radius: 7px; background: #3b82f6; color: #fff; font-size: 10.5px; font-weight: 600; display: flex; align-items: center; padding: 0 8px; overflow: hidden; white-space: nowrap; } .demo-div-48 { grid-row: 6; grid-column: 7 / 11; align-self: center; height: 22px; margin: 0 3px; border-radius: 7px; background: #06b6d4; color: #fff; font-size: 10.5px; font-weight: 600; display: flex; align-items: center; padding: 0 8px; overflow: hidden; white-space: nowrap; } .demo-div-49 { grid-row: 4; grid-column: 2 / 5; align-self: center; height: 22px; margin: 0 3px; border-radius: 7px; background: #06b6d4; color: #fff; font-size: 10.5px; font-weight: 600; display: flex; align-items: center; gap: 5px; padding: 0 8px; overflow: hidden; white-space: nowrap; } .demo-div-50 { position: absolute; right: 16px; bottom: 16px; display: flex; align-items: center; gap: 10px; background: oklch(0.15 0.02 60); color: oklch(0.95 0.01 80); border-radius: 12px; padding: 11px 16px; font-size: 12.5px; box-shadow: 0 12px 32px -8px rgba(0,0,0,0.35); } .demo-span-7 { width: 22px; height: 22px; border-radius: 50%; background: #16a34a; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .demo-div-51 { position: absolute; inset: 0; background: color-mix(in oklch, oklch(0.15 0.02 60) 32%, transparent); display: flex; align-items: center; justify-content: center; } .demo-div-52 { width: 392px; background: #fff; border-radius: 14px; box-shadow: 0 24px 64px -12px rgba(0,0,0,0.35); padding: 20px; display: flex; flex-direction: column; gap: 13px; } .demo-span-8 { font-size: 15px; font-weight: 700; } .demo-span-9 { font-size: 10.5px; font-weight: 600; color: #0e7490; background: #cffafe; padding: 2px 9px; border-radius: 999px; } .demo-div-53 { font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-foreground); margin-bottom: 4px; } .demo-div-54 { height: 34px; border-radius: 9px; display: flex; align-items: center; gap: 1px; padding: 0 11px; font-size: 13px; color: var(--foreground); } .demo-div-55 { height: 34px; border: 1px solid var(--border); border-radius: 9px; display: flex; align-items: center; padding: 0 11px; font-size: 13px; position: relative; } .demo-span-10 { color: var(--muted-foreground); } .demo-div-56 { height: 34px; border: 1px solid var(--border); border-radius: 9px; display: flex; align-items: center; padding: 0 11px; font-size: 13px; font-family: var(--font-mono, monospace); position: relative; } .demo-div-57 { display: flex; align-items: center; justify-content: space-between; background: var(--muted); border-radius: 10px; padding: 10px 12px; } .demo-span-11 { font-size: 12.5px; font-weight: 500; color: var(--muted-foreground); } .demo-span-12 { font-family: var(--font-mono, monospace); font-size: 16px; font-weight: 700; } .demo-span-13 { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 38px; border-radius: 10px; background: var(--primary); color: #fff; font-size: 13.5px; font-weight: 600; } .demo-div-58 { position: absolute; left: 0; top: 0; z-index: 20; pointer-events: none; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3)); } .demo-div-59 { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 10px; } .demo-span-14 { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 14px; border-radius: 999px; font-family: var(--font-sans, 'Geist', system-ui, sans-serif); font-size: 13px; font-weight: 500; } .demo-span-15 { font-family: var(--font-mono, monospace); font-size: 11px; font-weight: 700; } .demo-div-60 { width: 340px; box-sizing: border-box; flex-shrink: 0; height: 600px; border-radius: 36px; overflow: hidden; border: 8px solid #1c1c1e; box-shadow: 0 24px 80px rgba(0,0,0,0.35), 0 0 0 1px rgba(0,0,0,0.1); display: flex; flex-direction: column; background: #efeae2; } .demo-div-61 { height: 30px; background: #075E54; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; flex-shrink: 0; } .demo-span-16 { font-family: var(--font-mono, monospace); font-size: 11px; color: #fff; font-weight: 600; } .demo-div-62 { display: flex; align-items: center; gap: 4px; } .demo-div-63 { height: 56px; background: #075E54; display: flex; align-items: center; gap: 10px; padding: 0 12px; flex-shrink: 0; } .demo-span-17 { width: 34px; height: 34px; border-radius: 50%; background: #fff; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .demo-div-64 { font-size: 14.5px; font-weight: 600; color: #fff; } .demo-div-65 { font-size: 11px; color: rgba(255,255,255,0.75); } .demo-div-66 { flex: 1; padding: 14px 12px; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; } .demo-div-67 { align-self: flex-end; background: #d9fdd3; border-radius: 9px 9px 2px 9px; padding: 8px 10px; max-width: 84%; box-shadow: 0 1px 1px rgba(0,0,0,0.08); } .demo-div-68 { font-size: 13px; line-height: 1.4; color: #111; } .demo-div-69 { font-size: 10px; color: #667781; text-align: right; margin-top: 2px; } .demo-div-70 { align-self: flex-start; background: #fff; border-radius: 9px 9px 9px 2px; padding: 10px 14px; box-shadow: 0 1px 1px rgba(0,0,0,0.08); display: flex; gap: 4px; } .demo-div-71 { align-self: flex-start; background: #fff; border-radius: 9px 9px 9px 2px; padding: 8px 10px; max-width: 88%; box-shadow: 0 1px 1px rgba(0,0,0,0.08); } .demo-div-72 { height: 50px; background: #f0f0f0; display: flex; align-items: center; gap: 8px; padding: 0 10px; flex-shrink: 0; } .demo-div-73 { flex: 1; height: 34px; background: #fff; border-radius: 18px; display: flex; align-items: center; padding: 0 12px; font-size: 13px; color: #8696a0; } .demo-span-18 { width: 34px; height: 34px; border-radius: 50%; background: #075E54; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .demo-div-74 { display: flex; align-items: center; gap: 10px; justify-content: center; margin-top: 4px; } /* --- Módulos (#modulos) --- */ .mod-div-1 { max-width: 1160px; margin: 0 auto; padding: 0 28px; display: flex; flex-direction: column; gap: 18px; } .mod-h2 { margin: 0; font-size: clamp(32px, 3.6vw, 46px); font-weight: 700; letter-spacing: -0.025em; text-wrap: balance; max-width: 22ch; } .mod-p-1 { margin: 0 0 26px; font-size: 17px; line-height: 1.6; color: var(--muted-foreground); max-width: 60ch; text-wrap: pretty; } .mod-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } .mod-div-2 { grid-column: span 2; background: var(--card); border-radius: 16px; box-shadow: 0 0 0 1px color-mix(in oklch, var(--foreground) 10%, transparent); padding: 26px; display: flex; flex-direction: column; gap: 14px; } .mod-div-3 { display: flex; align-items: center; gap: 12px; } .mod-span-1 { width: 38px; height: 38px; border-radius: 11px; background: color-mix(in oklch, var(--primary) 10%, transparent); color: var(--primary); display: inline-flex; align-items: center; justify-content: center; } .mod-div-4 { font-size: 17px; font-weight: 700; } .mod-div-5 { font-size: 14px; color: var(--muted-foreground); } .mod-div-6 { background: var(--muted); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 8px; } .mod-span-2 { width: 40px; font-family: var(--font-mono, monospace); font-size: 11px; color: var(--muted-foreground); } .mod-div-7 { flex: 1; height: 18px; border-radius: 6px; background: #fff; position: relative; } .mod-div-8 { position: absolute; left: 6%; width: 38%; top: 0; bottom: 0; border-radius: 6px; background: #06b6d4; color: #fff; font-size: 10px; font-weight: 600; display: flex; align-items: center; padding: 0 7px; overflow: hidden; } .mod-div-9 { position: absolute; left: 52%; width: 36%; top: 0; bottom: 0; border-radius: 6px; background: #22c55e; color: #fff; font-size: 10px; font-weight: 600; display: flex; align-items: center; padding: 0 7px; overflow: hidden; } .mod-div-10 { position: absolute; left: 0%; width: 44%; top: 0; bottom: 0; border-radius: 6px; background: #16a34a; color: #fff; font-size: 10px; font-weight: 600; display: flex; align-items: center; padding: 0 7px; overflow: hidden; } .mod-div-11 { position: absolute; left: 58%; width: 40%; top: 0; bottom: 0; border-radius: 6px; background: #f59e0b; color: #fff; font-size: 10px; font-weight: 600; display: flex; align-items: center; padding: 0 7px; overflow: hidden; } .mod-div-12 { position: absolute; left: 14%; width: 52%; top: 0; bottom: 0; border-radius: 6px; background: #3b82f6; color: #fff; font-size: 10px; font-weight: 600; display: flex; align-items: center; padding: 0 7px; overflow: hidden; } .mod-div-13 { display: flex; gap: 14px; margin-top: 4px; flex-wrap: wrap; } .mod-span-3 { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--muted-foreground); } .mod-span-4 { width: 8px; height: 8px; border-radius: 3px; background: #06b6d4; } .mod-span-5 { width: 8px; height: 8px; border-radius: 3px; background: #f59e0b; } .mod-span-6 { width: 8px; height: 8px; border-radius: 3px; background: #22c55e; } .mod-span-7 { width: 8px; height: 8px; border-radius: 3px; background: #16a34a; } .mod-div-14 { background: var(--card); border-radius: 16px; box-shadow: 0 0 0 1px color-mix(in oklch, var(--foreground) 10%, transparent); padding: 26px; display: flex; flex-direction: column; gap: 14px; } .mod-div-15 { font-size: 14px; color: var(--muted-foreground); margin-top: 2px; } .mod-div-16 { background: var(--muted); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 9px; margin-top: auto; } .mod-div-17 { display: flex; align-items: center; gap: 9px; } .mod-span-8 { width: 24px; height: 24px; border-radius: 50%; background: color-mix(in oklch, var(--primary) 18%, transparent); color: var(--primary); display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; } .mod-span-9 { flex: 1; font-size: 12.5px; font-weight: 600; } .mod-span-10 { font-family: var(--font-mono, monospace); font-size: 11.5px; color: var(--muted-foreground); } .mod-div-18 { background: var(--card); border-radius: 16px; box-shadow: 0 0 0 1px color-mix(in oklch, var(--foreground) 10%, transparent); padding: 26px; display: flex; flex-direction: column; gap: 12px; } .mod-p-2 { margin: 0; font-size: 14px; line-height: 1.55; color: var(--muted-foreground); } .mod-div-19 { grid-column: span 2; background: var(--card); border-radius: 16px; box-shadow: 0 0 0 1px color-mix(in oklch, var(--foreground) 10%, transparent); padding: 26px; display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 22px; align-items: center; } .mod-div-20 { display: flex; flex-direction: column; gap: 12px; } .mod-p-3 { margin: 0; font-size: 14px; line-height: 1.55; color: var(--muted-foreground); max-width: 44ch; } .mod-div-21 { background: var(--muted); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 10px; } .mod-span-11 { width: 18px; height: 18px; border-radius: 50%; background: var(--primary); color: #fff; font-size: 10px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; } .mod-span-12 { flex: 1; height: 2px; background: var(--primary); } .mod-span-13 { flex: 1; height: 2px; background: var(--border); } .mod-span-14 { width: 18px; height: 18px; border-radius: 50%; background: #fff; color: var(--muted-foreground); font-size: 10px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 0 0 1px var(--border); } .mod-div-22 { background: #fff; border-radius: 9px; padding: 10px 12px; display: flex; justify-content: space-between; align-items: center; } .mod-div-23 { font-family: var(--font-mono, monospace); font-size: 13px; font-weight: 700; } .mod-div-24 { background: var(--primary); color: #fff; border-radius: 9px; padding: 8px 0; text-align: center; font-size: 12px; font-weight: 600; } .mod-div-25 { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; } .mod-span-15 { font-family: var(--font-mono, monospace); font-size: 10.5px; letter-spacing: 0.05em; padding: 4px 9px; border-radius: 999px; background: var(--muted); color: var(--muted-foreground); } .mod-div-26 { align-self: flex-end; background: #dcf8c6; border-radius: 9px; padding: 9px 12px; max-width: 92%; } .mod-div-27 { font-size: 11.5px; line-height: 1.4; color: #111; } .mod-div-28 { align-self: flex-start; background: #fff; border-radius: 9px; padding: 9px 12px; max-width: 92%; } /* --- Precios (#precios) --- */ .price-section { padding: 96px 0; } .price-h2 { margin: 0; font-size: clamp(32px, 3.6vw, 46px); font-weight: 700; letter-spacing: -0.025em; text-align: center; } .price-p-1 { margin: 0 0 26px; font-size: 17px; color: var(--muted-foreground); text-align: center; } .price-div-1 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; width: 100%; max-width: 980px; align-items: stretch; } .price-div-2 { background: var(--card); border-radius: 16px; box-shadow: 0 0 0 1px color-mix(in oklch, var(--foreground) 10%, transparent); padding: 28px; display: flex; flex-direction: column; gap: 14px; } .price-span-1 { font-family: var(--font-mono, monospace); font-size: 12px; letter-spacing: 0.1em; color: var(--muted-foreground); } .price-div-3 { display: flex; align-items: baseline; gap: 6px; } .price-span-2 { font-family: var(--font-mono, monospace); font-size: 34px; font-weight: 700; letter-spacing: -0.02em; } .price-span-3 { font-size: 13px; color: var(--muted-foreground); } .price-p-2 { margin: 0; font-size: 14px; line-height: 1.55; color: var(--muted-foreground); flex: 1; } .price-a-1 { display: inline-flex; align-items: center; justify-content: center; height: 40px; border-radius: 10px; border: 1px solid var(--border); background: var(--card); color: var(--foreground); font-size: 14px; font-weight: 500; text-decoration: none; transition: background-color .15s; } .price-div-4 { position: relative; background: var(--card); border-radius: 16px; box-shadow: 0 0 0 2px var(--primary), 0 16px 40px -20px color-mix(in oklch, var(--primary) 45%, transparent); padding: 28px; display: flex; flex-direction: column; gap: 14px; } .price-span-4 { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); background: var(--primary); color: #fff; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; padding: 4px 12px; border-radius: 999px; } .price-span-5 { font-family: var(--font-mono, monospace); font-size: 12px; letter-spacing: 0.1em; color: var(--primary); font-weight: 600; } .price-a-2 { display: inline-flex; align-items: center; justify-content: center; height: 40px; border-radius: 10px; background: var(--primary); color: #fff; font-size: 14px; font-weight: 600; text-decoration: none; transition: background-color .15s; } /* --- FAQ (#faq) --- */ .faq-div-1 { max-width: 800px; margin: 0 auto; padding: 0 28px; display: flex; flex-direction: column; align-items: center; gap: 18px; } .faq-h2 { margin: 0 0 8px; font-size: clamp(32px, 3.6vw, 46px); font-weight: 700; letter-spacing: -0.025em; text-align: center; text-wrap: balance; } .faq-div-2 { display: flex; flex-direction: column; gap: 10px; width: 100%; } .faq-details { background: var(--card); border-radius: 12px; box-shadow: 0 0 0 1px color-mix(in oklch, var(--foreground) 10%, transparent); padding: 18px 22px; } .faq-summary { cursor: pointer; font-size: 16px; font-weight: 600; list-style: none; } .faq-p { margin: 12px 0 0; font-size: 15px; line-height: 1.6; color: var(--muted-foreground); } /* --- CTA final --- */ .cta-section { padding: 24px 0 110px; } .cta-div-1 { max-width: 1160px; margin: 0 auto; padding: 0 28px; } .cta-box { position: relative; overflow: hidden; background: oklch(0.15 0.02 60); border-radius: 24px; padding: 84px 40px; display: flex; flex-direction: column; align-items: center; gap: 22px; text-align: center; } .cta-div-2 { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(560px 280px at 50% 115%, color-mix(in oklch, var(--primary) 32%, transparent), transparent 70%); } .cta-div-3 { position: relative; display: flex; align-items: center; gap: 10px; } .cta-img { height: 44px; display: block; } .cta-span-1 { font-family: 'Poppins', sans-serif; font-size: 23px; font-weight: 600; letter-spacing: -0.01em; line-height: 1; } .cta-h2 { margin: 0; position: relative; font-size: clamp(32px, 3.8vw, 48px); font-weight: 700; letter-spacing: -0.025em; color: oklch(0.97 0.005 80); text-wrap: balance; max-width: 24ch; } .cta-p { margin: 0; position: relative; font-size: 17px; line-height: 1.6; color: oklch(0.72 0.02 80); max-width: 52ch; text-wrap: pretty; } .cta-a { position: relative; display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 28px; border-radius: 13px; background: var(--primary); color: #fff; font-size: 16.5px; font-weight: 600; text-decoration: none; margin-top: 8px; transition: background-color .15s, transform .04s; } .cta-span-2 { position: relative; font-family: var(--font-mono, monospace); font-size: 12.5px; color: oklch(0.6 0.02 80); } /* --- Footer --- */ .foot-footer { background: oklch(0.12 0.02 60); color: oklch(0.72 0.02 80); } .foot-div-1 { max-width: 1160px; margin: 0 auto; padding: 56px 28px 32px; display: flex; flex-direction: column; gap: 40px; } .footer-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 36px; } .foot-div-2 { display: flex; flex-direction: column; gap: 14px; } .foot-div-3 { display: flex; align-items: center; gap: 8px; align-self: flex-start; } .foot-img { height: 34px; display: block; } .foot-span-1 { font-family: 'Poppins', sans-serif; font-size: 18px; font-weight: 600; letter-spacing: -0.01em; line-height: 1; } .foot-p { margin: 0; font-size: 13.5px; line-height: 1.6; max-width: 34ch; } .foot-div-4 { display: flex; flex-direction: column; gap: 10px; } .foot-span-2 { font-family: var(--font-mono, monospace); font-size: 11px; letter-spacing: 0.12em; color: oklch(0.55 0.02 80); } .foot-a { font-size: 13.5px; color: oklch(0.78 0.02 80); text-decoration: none; } .footer-bar { border-top: 1px solid oklch(0.22 0.02 60); padding-top: 22px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .foot-span-3 { font-size: 12.5px; color: oklch(0.55 0.02 80); } .foot-span-4 { font-family: var(--font-mono, monospace); font-size: 12px; color: oklch(0.55 0.02 80); } /* --- Hover (antes style-hover="...", atributo del runtime del bundler que nadie leía: estos efectos no se veían). Solo en dispositivos con mouse, para que en táctil no queden "pegados" tras un tap. --- */ @media (hover: hover) { .nav-a-2:hover { background: var(--muted); color: var(--foreground); } .nav-a-3:hover, .hero-a-1:hover, .price-a-2:hover, .cta-a:hover { background: color-mix(in oklch, var(--primary) 90%, black); } .hero-a-2:hover, .price-a-1:hover { background: var(--muted); } .foot-a:hover { color: #fff; } /* Marquee de capturas del hero: pausar al pasar el mouse para poder leerlas */ .hero-div-5:hover, .hero-div-14:hover { animation-play-state: paused; } } /* Texto solo para lectores de pantalla y crawlers. El H1 del hero lo usa: los .word-cycle-item no tienen espacios entre sí ("hotel.hostal.cabaña.lodge."), así que el ciclo visual queda aria-hidden y esta versión legible lo reemplaza. */ .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; } /* ═════════════════════════════════════════════════════════════════════════ Estilos de pagina-web-para-hostales.html (2026-10-05) Reusa las clases de index.html para nav, hero (hero-span-*, hero-lead, hero-a-*), encabezados de sección (u-span-2, mod-h2, mod-p-1), FAQ, CTA final y footer. Aquí solo va lo propio de esta página (prefijo web-). ═════════════════════════════════════════════════════════════════════════ */ .web-hero { max-width: 1160px; margin: 0 auto; padding: 72px 28px 88px; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 56px; align-items: center; position: relative; } .web-h1 { margin: 0; font-size: clamp(36px, 4.4vw, 54px); line-height: 1.06; font-weight: 700; letter-spacing: -0.03em; text-wrap: balance; } .web-ctas { display: flex; gap: 12px; flex-wrap: wrap; } .web-note { margin: 0; font-family: var(--font-mono, monospace); font-size: 12.5px; color: var(--muted-foreground); } /* Mockup del sitio del alojamiento (decorativo) */ .web-mock { background: var(--card); border-radius: 16px; box-shadow: 0 0 0 1px color-mix(in oklch, var(--foreground) 10%, transparent), 0 24px 48px -24px color-mix(in oklch, var(--foreground) 30%, transparent); overflow: hidden; } .web-mock-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: var(--muted); border-bottom: 1px solid var(--border); } .web-mock-dot { width: 9px; height: 9px; border-radius: 50%; background: color-mix(in oklch, var(--foreground) 18%, transparent); } .web-mock-url { margin-left: 10px; flex: 1; font-family: var(--font-mono, monospace); font-size: 11.5px; color: var(--muted-foreground); background: var(--card); border-radius: 6px; padding: 4px 10px; } .web-mock-body { padding: 14px; display: flex; flex-direction: column; gap: 10px; } .web-mock-cover { display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; min-height: 120px; padding: 16px; border-radius: 12px; color: #fff; background: linear-gradient(160deg, oklch(0.62 0.09 220), oklch(0.36 0.08 250)); } .web-mock-name { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; } .web-mock-place { font-size: 12.5px; opacity: 0.85; } .web-mock-search { display: grid; grid-template-columns: 1fr 1fr 0.7fr auto; gap: 6px; align-items: stretch; } .web-mock-field { display: flex; flex-direction: column; gap: 1px; font-size: 12.5px; font-weight: 600; padding: 7px 9px; border: 1px solid var(--border); border-radius: 8px; } .web-mock-field small, .web-mock-room-info small, .web-mock-price small { font-size: 10.5px; font-weight: 400; color: var(--muted-foreground); } .web-mock-btn { display: flex; align-items: center; padding: 0 14px; border-radius: 8px; background: var(--primary); color: #fff; font-size: 12.5px; font-weight: 600; } .web-mock-room { display: flex; align-items: center; gap: 10px; padding: 8px; border: 1px solid var(--border); border-radius: 10px; } .web-mock-thumb { width: 52px; height: 40px; flex: none; border-radius: 7px; background: linear-gradient(135deg, oklch(0.82 0.05 70), oklch(0.68 0.07 50)); } .web-mock-thumb-2 { background: linear-gradient(135deg, oklch(0.84 0.04 160), oklch(0.66 0.06 180)); } .web-mock-room-info { display: flex; flex-direction: column; gap: 1px; flex: 1; font-size: 13px; } .web-mock-price { font-family: var(--font-mono, monospace); font-size: 13.5px; font-weight: 700; white-space: nowrap; } .web-mock-chips { display: flex; flex-wrap: wrap; gap: 6px; } .web-mock-chips span { font-size: 11px; padding: 4px 9px; border-radius: 999px; background: var(--muted); color: var(--muted-foreground); } /* Secciones */ .web-section { padding: 88px 0; } .web-section-plain { background: transparent; } .web-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } .web-card { background: var(--card); border-radius: 16px; box-shadow: 0 0 0 1px color-mix(in oklch, var(--foreground) 10%, transparent); padding: 24px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; } .web-card-featured { box-shadow: 0 0 0 2px var(--primary); } .web-h3 { margin: 0; font-size: 17px; font-weight: 700; } .web-p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--muted-foreground); } .web-tag { font-family: var(--font-mono, monospace); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600; color: var(--primary); background: color-mix(in oklch, var(--primary) 9%, transparent); padding: 4px 9px; border-radius: 999px; } .web-tag-muted { color: var(--muted-foreground); background: var(--muted); } .web-code { font-family: var(--font-mono, monospace); font-size: 13px; color: var(--foreground); } .web-steps { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; } .web-step { display: flex; flex-direction: column; gap: 10px; } .web-step-n { width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-mono, monospace); font-size: 14px; font-weight: 700; color: var(--primary); background: color-mix(in oklch, var(--primary) 10%, transparent); } .web-prose > * { max-width: 760px; } .web-body { margin: 0; font-size: 17px; line-height: 1.7; color: var(--muted-foreground); text-wrap: pretty; } .web-body strong { color: var(--foreground); } .web-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } .web-plan { background: var(--card); border-radius: 16px; box-shadow: 0 0 0 1px color-mix(in oklch, var(--foreground) 10%, transparent); padding: 22px 24px; display: flex; flex-direction: column; gap: 6px; color: inherit; text-decoration: none; } .web-plan-name { font-family: var(--font-mono, monospace); font-size: 12px; letter-spacing: 0.1em; font-weight: 600; color: var(--primary); } .web-plan-price { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; } .web-plan-price small { font-size: 13px; font-weight: 500; color: var(--muted-foreground); } .web-plan-desc { font-size: 14px; line-height: 1.5; color: var(--muted-foreground); } .web-link { align-self: flex-start; margin-top: 6px; font-size: 15px; font-weight: 600; color: var(--primary); text-decoration: none; } @media (hover: hover) { .web-plan { transition: box-shadow .15s; } .web-plan:hover { box-shadow: 0 0 0 1px var(--primary); } .web-link:hover { text-decoration: underline; } } @media (max-width: 1023px) { .web-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } .web-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 767px) { .web-hero { grid-template-columns: 1fr; padding: 44px 20px 56px; gap: 40px; } .web-h1 { font-size: clamp(30px, 8vw, 40px); } .web-ctas { flex-direction: column; gap: 10px; width: 100%; } .web-ctas > a { justify-content: center; } .web-section { padding: 56px 0; } .web-inner { padding: 0 20px; } .web-grid, .web-steps, .web-plans { grid-template-columns: 1fr; } .web-mock-search { grid-template-columns: 1fr 1fr; } .web-mock-btn { justify-content: center; padding: 9px 14px; } .web-body { font-size: 16px; } } /* Link a /pagina-web-para-hostales dentro de la tarjeta del módulo en index.html */ .mod-a-web { display: inline-block; margin-top: 6px; color: var(--primary); font-weight: 600; text-decoration: none; } @media (hover: hover) { .mod-a-web:hover { text-decoration: underline; } } /* ═════════════════════════════════════════════════════════════════════════ Estilos de guias/ (artículos e índice) — 2026-10-05 Reusan nav, FAQ, footer, wa-float y botones (hero-a-1) de index.html. Prefijo art-. ═════════════════════════════════════════════════════════════════════════ */ .art-main { padding: 40px 28px 96px; } .art-article { max-width: 760px; margin: 0 auto; font-size: 17px; line-height: 1.75; } .art-article > p, .art-article li { color: color-mix(in oklch, var(--foreground) 85%, transparent); text-wrap: pretty; } .art-article > p { margin: 0 0 18px; } .art-article a { color: var(--primary); } .art-crumbs { font-size: 13.5px; color: var(--muted-foreground); margin-bottom: 28px; } .art-crumbs a { color: var(--muted-foreground); text-decoration: none; } .art-header { display: flex; flex-direction: column; gap: 14px; margin-bottom: 32px; } .art-h1 { margin: 0; font-size: clamp(30px, 4vw, 44px); line-height: 1.12; font-weight: 700; letter-spacing: -0.025em; text-wrap: balance; } .art-lead { margin: 0; font-size: 19px; line-height: 1.65; color: var(--muted-foreground); } .art-meta { margin: 0; font-family: var(--font-mono, monospace); font-size: 12.5px; color: var(--muted-foreground); } .art-h2 { margin: 48px 0 14px; font-size: clamp(23px, 2.6vw, 28px); line-height: 1.25; font-weight: 700; letter-spacing: -0.015em; scroll-margin-top: 80px; } .art-summary { background: color-mix(in oklch, var(--primary) 6%, var(--card)); border-radius: 14px; box-shadow: 0 0 0 1px color-mix(in oklch, var(--primary) 22%, transparent); padding: 20px 24px; font-size: 16px; } .art-summary ul { margin: 8px 0 0; padding-left: 20px; } .art-summary li { margin: 4px 0; } .art-list { margin: 0 0 18px; padding-left: 22px; } .art-list li { margin: 8px 0; } .art-table-wrap { overflow-x: auto; margin: 4px 0 10px; } .art-table { width: 100%; border-collapse: collapse; font-size: 16px; } .art-table th, .art-table td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--border); } .art-table th { font-size: 13px; font-weight: 600; color: var(--muted-foreground); text-transform: uppercase; letter-spacing: 0.04em; } .art-table td { font-family: var(--font-mono, monospace); font-size: 15px; } .art-note { font-size: 14px !important; line-height: 1.6; color: var(--muted-foreground) !important; } .art-cta { margin: 40px 0 8px; padding: 26px; border-radius: 16px; background: var(--card); box-shadow: 0 0 0 2px var(--primary); display: flex; flex-direction: column; align-items: flex-start; gap: 10px; } .art-cta p { margin: 0; font-size: 16px; line-height: 1.65; color: var(--muted-foreground); } .art-cta .art-cta-title { font-size: 20px; font-weight: 700; line-height: 1.3; color: var(--foreground); } .art-article a.art-cta-btn { color: #fff; margin-top: 6px; } .art-faq { margin-bottom: 8px; } .art-sources { margin: 0 0 16px; padding-left: 22px; font-size: 15px; } .art-sources li { margin: 6px 0; } .art-cards { display: grid; gap: 14px; margin-bottom: 20px; } .art-article a.art-card { display: flex; flex-direction: column; gap: 6px; padding: 20px 22px; border-radius: 14px; background: var(--card); box-shadow: 0 0 0 1px color-mix(in oklch, var(--foreground) 10%, transparent); color: inherit; text-decoration: none; } .art-card-title { font-size: 18px; font-weight: 700; line-height: 1.35; } .art-card-desc { font-size: 15px; line-height: 1.55; color: var(--muted-foreground); } @media (hover: hover) { .art-crumbs a:hover { text-decoration: underline; } .art-article a.art-card { transition: box-shadow .15s; } .art-article a.art-card:hover { box-shadow: 0 0 0 1px var(--primary); } } @media (max-width: 767px) { .art-main { padding: 28px 20px 64px; } .art-article { font-size: 16px; } .art-lead { font-size: 17px; } .art-h2 { margin-top: 40px; } .art-cta { padding: 22px 20px; } .art-article a.art-cta-btn { width: 100%; box-sizing: border-box; justify-content: center; } } .web-inline-a { color: var(--primary); } .art-article a.art-meta-a { color: inherit; } .art-author { margin: 40px 0 0; padding: 18px 22px; border-radius: 14px; background: var(--card); box-shadow: 0 0 0 1px color-mix(in oklch, var(--foreground) 10%, transparent); display: flex; flex-direction: column; gap: 4px; scroll-margin-top: 80px; } .art-author-name { font-size: 16px; font-weight: 700; } .art-author-role { font-size: 14.5px; line-height: 1.55; color: var(--muted-foreground); }